内容简介: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 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:
- Columns
- Rows
- Cells
- Grid Lines
- Gutter
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:
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:
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.
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.
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- CSS Grid Layout
- 探讨CSS Grid Layout在原生客户端中运用
- Why CSS Grid Layout doesn't replace the framework's grid
- Modern CSS grid solutions to common layout problems
- Responsive Grid Magazine Layout in Just 20 Lines of CSS
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Google總部大揭密
史蒂芬.李維 / 陳重亨 / 財信 / 2011-11
∣如果有一天,Google的搜尋引擎突然故障 ∣GMAIL信件全數消失 ∣Google Maps、Google Docs、Google行事曆等所有雲端服務全面停擺 ∣我們該怎麼辦?! 歷史上像Google如此成功,且廣受推崇的企業可沒幾家。它改變了網路的使用方式,也成了我們生活不可或缺的一部分。這到底是怎麼辦到的? 《連線》雜誌資深主筆史蒂芬.李維史無前例同時取得LS......一起来看看 《Google總部大揭密》 这本书的介绍吧!