[caption id="attachment_129426" align="aligncenter" width="700"]
Grids are important when creating complex websites. The importance of grids in modern web design is clear from the number of frameworks that implement the grid system to speed up development.
With the introduction of the CSS Grid Layout spec, you will not need to include a separate stylesheet just to use the grid system. Another advantage is that you will not have to rely on properties like inline and float to lay out the elements on a web page. In this tutorial, we will cover the fundamentals of the grid system and create a basic blog layout.
Browser Support
At present, only IE 10+ and Edge support Grid Layout — you cannot use it on a commercial website just yet.
It can be enabled in Chrome through the "Experimental Web Platform features" flag in chrome://flags. You can enable it in Firefox using the layout.css.grid.enabled flag.
Another option is to use a polyfill. A CSS Grid Polyfill does exist! Using the various options above, you can start experimenting and learn as much about the Grid Layout as you can while it is still in its infancy.
Note: Internet Explorer has currently implemented the older version of the spec. Unfortunately, this means that it is not entirely compatible with the latest spec. When going through the examples in this tutorial I suggest you use Chrome or Firefox with appropriate flags enabled.
Grid System Terminology
The CSS grid system is similar to tables when it comes to laying out elements. However, it is much more powerful and flexible. In this section, I will discuss a few terms that you will need to keep in mind when working with grids:
The fr unit: This unit is used to specify a fraction of available space. It is meant to be used with grid-rows and grid-columns. According to the spec —
The distribution of fractional space occurs after all 'length' or content-based row and column sizes have reached their maximum.
Lines: Lines define the boundaries of other elements. They run vertically as well as horizontally. In the figure below, there are four vertical and four horizontal lines.
Tracks: Tracks are the space between parallel lines. In the figure below, there are three vertical and three horizontal tracks.
Cells: Cells are the building block of grids. In the figure below, there are nine cells in total.
Areas: An area is a rectangular shape with an arbitrary number of cells. So, a track is an area and so is a cell.
Positioning Elements in a Grid
Let's begin with the basics. In this section, I will teach you how to position elements at a certain location using grids. To use CSS Grid Layout, you need a parent element and one or more child elements. For the sake of demonstration, I will use the following markup for our grid system:
[code language="html"]
<div class="grid-container">
<div class="grid-element item-a">A</div>
<div class="grid-element item-b">B</div>
<div class="grid-element item-c">C</div>
<div class="grid-element item-d">D</div>
<div class="grid-element item-e">E</div>
<div class="grid-element item-f">F</div>
</div>
[/code]
After you are done with the markup you need to apply display:grid or display:inline-grid on the parent element along with other styling like this:
[code language="css"]
.grid-container {
display: grid;
grid-template-columns: 200px 10px 0.3fr 10px 0.7fr;
grid-template-rows: auto 20px auto;
}
[/code]
The grid-template-columns and grid-template-rows properties are used to specify the width of various rows and columns. In the above example, I have defined five columns. The 10px columns act as gutters to provide required spacing between elements. The first column is 200px wide. The third column takes up 0.3 parts of the remaining space. Similarly, fifth column takes up 0.7 parts of the remaining space.
Using auto for the first row in grid-template-rows allows the row to expand as necessary based on the content inside it. The 20px row acts as a gutter.
At this point, the elements are packed closely together as evident from the following demo.
See the Pen CSS Grid Layout Demo 1 by SitePoint (@SitePoint) on CodePen.
Observe that element B is in the second column that we were planning on using as a gutter. If you don't specify the position of child elements inside the grid, the browser puts one element per cell until the first row is completely filled, the rest of the elements then go in the next row. This is the reason that we are left with four spare columns in the second row.
To move elements to a specific cell in the grid you need to specify their position in CSS. Before I explain how to move elements around using grid system, take a look at the following image.
In this example, we will be using "line-based placements". Line-based placement means that the lines in our grid system will act as guidelines to place and confine elements. Let's take element B as an example. Horizontally, it starts at column line 3 and ends at column line 4. Along the vertical axis, it is located between the line at row 1 and the line at row 2.
We use grid-column-start to specify the starting vertical line for an element. In this case, it would be set to 3. grid-column-end indicates the ending vertical line for an element. This property would be equal to 4 in this case. Corresponding row values will also be set similarly.
With all of the above in mind, to move element B to the second cell you would use the following CSS:
[code language="css"]
.element-b {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
}
[/code]
Similarly, to move element F to the sixth cell you would use the following CSS:
[code language="css"]
.element-f {
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 3;
grid-row-end: 4;
}
[/code]
After these changes in CSS, the elements should be spaced properly like they are in this demo:
See the Pen CSS Grid Layout Demo 2 by SitePoint (@SitePoint) on CodePen.
Continue reading %Introducing the CSS Grid Layout%
by Nitish Kumar via SitePoint
No comments:
Post a Comment