#grid {\r\n display: grid;\r\n}<\/code><\/pre>\nGrid items<\/a> are the children of the grid. The items of the grid we define here are the header, left navigation, content, and footer. Give each of them a name, or a custom identifier<\/a>, by assigning it to their grid-area property.<\/p>\n\r\n.header {\r\n grid-area: header;\r\n}\r\n\r\n.left-nav {\r\n grid-area: left-nav;\r\n}\r\n\r\n.content {\r\n grid-area: content;\r\n}\r\n\r\n.footer {\r\n grid-area: footer;\r\n}<\/code><\/pre>\nYou define the width of columns by setting sizing values to the grid-template-columns property. As for the height of rows, you set the sizing values to the grid-template-rows property. The grid\u2019s columns and rows are known as Grid Tracks.<\/a><\/p>\n\r\ngrid-template-rows: 100px auto 25%;\r\ngrid-template-columns: 200px auto;<\/code>\r\n<\/pre>\nSet the values for the grid-template-areas property. In this property, each grid item’s name is arranged in an order in which you want them to be displayed on the grid. A row represents a string set. For example, “header header” is a row. And so is “left-nav content.” The columns are represented by names, separated by a space. Note that “header” is shown twice since it takes up both columns in that row.<\/p>\n
\r\ngrid-template-areas: \"header header\"\r\n \"left-nav content\"\r\n \"footer footer\";<\/code><\/pre>\nHere\u2019s the HTML. Each nested <div><\/code>represents a grid item.<\/p>\n<div class=\"header\">header<\/div>\r\n<div class=\"left-nav\">left-nav<\/div>\r\n<div class=\"content\">content<\/div>\r\n<div class=\"footer\">footer<\/div><\/code><\/pre>\nThe result:<\/p>\n
![\"\"](\"http:\/\/local.nitsuga.com.blog\/wp-content\/uploads\/2017\/11\/simple-grid.png\")
<\/p>\n
Useful Grid Layout Features<\/h2>\n
As you can see, it didn\u2019t take much effort to get a simple grid layout prototype up and running. However, Grid Layout has much more to offer. Let\u2019s utilize other Grid Layout features to customize our grid even further.<\/p>\n
Track Sizing Values<\/h3>\n
When you define the track sizing<\/a> of a grid, the track listing<\/a> in the grid-template-rows and grid-template-columns can also accept track size values<\/a> other than length, auto, and percentage. Consider the following example:<\/p>\n![\"\"](\"http:\/\/local.nitsuga.com.blog\/wp-content\/uploads\/2017\/11\/track-sizing.png\")
<\/p>\n
grid-template-rows: 100px 2fr 1fr;\r\ngrid-template-columns: minmax(200px, 500px) auto;<\/code><\/pre>\nHere, we can use a track size value returned by the minmax()<\/a> function (exclusive to Grid Layout) and a fr unit<\/a> value. They both are used to create a responsive grid.<\/p>\nThe minmax() function takes two parameters: a minimum value and a maximum value. In our example above, the minimum is 200px and the maximum is 500px. Resizing the viewport results in function returning column width values between the minimum and maximum values.<\/p>\n
The fr is known as a \u201cfractional unit.\u201d If a grid item has a track size value for either a row or column of one fractional unit, it takes up a fraction of available grid container space. In the example above, the remainder of the grid\u2019s height (the height of the grid minus the height of row 1), is distributed between row 2 and row 3. Two-thirds (2fr) of the height goes to row 2 and one-third (1fr) of the height goes to row 3.<\/p>\n
Responsive grid<\/h3>\n
For a responsive grid, modify the following grid container properties per media query: grid-template-rows, grid-template-columns, and grid-template-areas.<\/p>\n
\/* 321px and up *\/\r\n@media(min-width: 321px) {\r\n #grid {\r\n grid-template-rows: 100px 2fr 1fr;\r\n grid-template-columns: 200px auto;\r\n grid-template-areas: \"header header\"\r\n \"left-nav content\"\r\n \"footer footer\";\r\n }\r\n}\r\n\r\n\/* 320px and below *\/\r\n@media(max-width: 320px) {\r\n #grid {\r\n grid-template-rows: 100px 1fr 3fr 100px;\r\n grid-template-columns: 100%;\r\n grid-template-areas: \"header\"\r\n \"left-nav\"\r\n \"content\"\r\n \"footer\";\r\n }\r\n}<\/code><\/pre>\nNotice how the grid-template-areas value is set up for the 320px and below media query. Each
\nnamed area forms one column, since this view is for mobile phone devices.<\/p>\n
![\"\"](\"http:\/\/nitsuga.com\/blog\/wp-content\/uploads\/2017\/11\/responsive-grid-1.gif\")
<\/p>\n
Named Lines<\/h3>\n
Although you can reference grid lines by numerical index<\/a>, Grid Layout allows you to create custom names for grid lines. This feature helps identify, maintain, and provide a meaningful reference to grid lines and areas in your stylesheet. Use the named lines as a value in the grid-template-rows property and grid-template-columns property of a grid. Provide any name you choose for a line, but \u2018span<\/a>\u2019. You surround the custom line name in brackets. The same line can also have multiple names. For example, you may want to refer to a line that signifies the end of a column and the start of an adjacent column. However, I found that multiple names can be overkill, so I like the idea of having one name per line.<\/p>\n![\"\"](\"http:\/\/local.nitsuga.com.blog\/wp-content\/uploads\/2017\/11\/named-lines.png\")
<\/p>\n
#grid {\r\n\r\n\tgrid-template-rows: [row1-start] 100px [row2-start] 2fr [row3-start] 1fr [row3-end];\r\n\tgrid-template-columns: [col1-start] minmax(200px, 500px) [col2-start] auto [col2-end];\r\n}<\/code><\/pre>\nInterestingly, you can have multiple lines with the same name. But how do you reference a specific line if there are lines sharing the same name? Let’s see an example of how to accomplish this. In this example, we will need to pinpoint the correct line names to place our grid items on specific locations on the grid.<\/p>\n
![\"\"](\"http:\/\/local.nitsuga.com.blog\/wp-content\/uploads\/2017\/11\/same-named-lines.png\")
<\/p>\n
![\"\"](\"http:\/\/local.nitsuga.com.blog\/wp-content\/uploads\/2017\/11\/span-keyword.png\")
<\/p>\n