CSS Grid Layout

栏目: IT技术 · 发布时间: 4年前

内容简介:CSS Grid has taken over the world of web design since its introduction. It’s cool and awesome. There are plenty of tutorials, blogs and articles on the internet, which are great source of learning. However, majority of them are going to teach you the basic

CSS Grid Layout

CSS Grid has taken over the world of web design since its introduction. It’s cool and awesome. There are plenty of tutorials, blogs and articles on the internet, which are great source of learning. However, majority of them are going to teach you the basics with no real examples. So my advice for this blog is to go ahead and learn the basics from those blogs before go ahead with this blog.

CSS Grid allows us to write better layouts using in browser capability of grids. Prior to CSS Grid, we use to have either our own custom grid system or used something like bootstrap. While they are great but CSS grid takes the pain out of most the things we face in those solutions.

CSS Grid makes it a piece of cake in developing simple and complex layouts. In this blog we will learn some basic terminologies and then go ahead with simple layout example.

The basic terminologies associated with CSS Grids are below:

  1. Columns
  2. Rows
  3. Cells
  4. Grid Lines
  5. Gutter

CSS Grid Layout

As you can see in the diagram above, all the terminologies are explained pretty well. Above example is a 3x2 column grid which means 3 columns and 2 rows.

Now the basic concepts are out of the way we are going to use these concepts into example layout. We are going to built example layout like below:

CSS Grid Layout

As it can be seen there is a header, a footer then center row has 3 columns with nav in first column sidebar on the right and main content area in the center which occupies most of the area.

Below is the sample html for this example.

Now html is out of our way lets dig into CSS part. First and for most, lets give it some styling so that our html looks like above. These css rules are not part of css grid, you can omit if you want.

As you can see I am styling all the items inside wrapper container. I am setting its background color to orange giving bottom and right margins. Giving display flex just to align items dead center by setting justify-content and align-items to center .

Next, lets get into the CSS grid part of it.

In above piece of code we are setting display to grid hence the title of this topic. That is how we convert a container into grid . Next we set columns and rows and the way we do it is by using grid-template-columns and grid-template-rows properties. grid-template-columns allows us to set number of columns with its appropriate width . grid-template-rows allows us to set number of rows with its appropriate height . In example above, there are 3 columns with first column taking 1 fraction , second column taking 5 fraction and third column 2 fractions . Whereas A single fraction unit means “one piece of however many pieces we are splitting this into” .

The same applies to rows , As there are three rows i.e. first row contains header which takes the entire row mean all three columns, second row takes nav, contents and aside whereas footer goes to the third and last row takes up all three columns.

This means the first and the last rows takes same amount of height i.e. 5 fractions . Whereas the center row takes the rest of the remaining height.

Next we also give gutter of 10px. The way we do it in CSS Grid is by using grid-gap property. Lastly, we give a height to wrapper container.

If we take a look at it in the browser this will yield a result, we are looking for which is below:

CSS Grid Layout

Now to make it look more the way want it to be is to be setting some properties to header and footer. We are going to tell header and footer to take up their entire rows.

And the way we are going to use it is by using grid-column-start and grid-column-end properties.

As you can see both header and footer starts from grid line 1 and ends grid line 4. This allows them to take up the entire rows. This will yield the exact output we are looking forward as below.

CSS Grid Layout

The entire code is below for this example.

That is it for this blog. Please keep following for more blogs. If you liked in don’t forget to clap it. If you have question then comment below.


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Microformats

Microformats

John Allsopp / friends of ED / March 26, 2007 / $34.99

In this book, noted web developer and long time WaSP member John Allsop teaches all you need to know about the technology: what Microformats are currently available and how to use them; the general pr......一起来看看 《Microformats》 这本书的介绍吧!

MD5 加密
MD5 加密

MD5 加密工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换