CSS Grid: Web-Development Guide

CSS Grid technology appeared in 2011, but interest is still growing. This article is a small technical guide to the most interesting features and functions which will be useful for frontend developers as well as for other web development and design specialists.

The CSS Grid specification changes UI development methods, allowing you to change the layout of grid elements without affecting the HTML.

This technology was developed for more than five years before acquiring the support of modern browsers in mid-2017. CSS Grid simplifies the description of page layouts, making the HTML page layout simpler and more adaptive.

What is CSS Grid?

CSS Grid fundamentally changes the process of creating adaptive interfaces, including:

• setting fixed and flexible sizes of rows;
• setting element locations;
• managing alignment;
• managing overlapping content.

Before you start working with CSS Grid, you need to understand some basic terms. The entire specification is built using logic based on this terminology. Each element is closely related to other elements and is responsible for a certain part of the grid container.

Grid container

The grid container is a set of intersecting horizontal and vertical grid lines that divide the space into grid areas where grid elements can be placed. Inside the grid container are two sets of grid lines: one defines the columns, the other defines the rows.

Grid container uses display: grid. This is a direct parent for all grid elements.

<div class="container"> 
     <div class="item item-1"></div>
     <div class="item item-2"></div>
     <div class="item item-3"></div> 
</div>

Grid elements

Grid elements are children (direct descendants) of the container.

Here, elements of class item are grid elements but elements of class sub-item are not.

<div class="container"> 
     <div class="item"></div> 
     <div class="item"> 
           <p class="sub-item"></p> 
     </div> 
     <div class="item"></div> 
</div>

Grid lines

Grid lines are horizontal and vertical grid container separators. These lines are on either side of a column or a row. 

Grid lines form the container structure. The developer can specify a name or numeric index for an element, which can be used in styles. Numbering starts from one.

Note:

The Grid line element is susceptible to the recourse spelling mode. For example, if you use Arabic or any other language with right-to-left writing, the line numbering will start on the right side.

Grid lines can be attached to grid elements by numbers or by names.

Grid strips

Grid strips are elements limited to a pair of neighboring grid lines. Vertical grid bands are columns of the grid (analogous to the columns of a table), and horizontal rows are analogous to rows of a table.

Grid cell

A grid cell is the smallest indivisible unit of a grid container that can be referenced when positioning grid elements. A grid cell is formed by the intersection of a grid row and a grid column. It’s the analogue of a table cell.

Grid area

A grid area is a space inside the grid container where one or more grid elements can be placed. This area can consist of one or more grids.

Grid areas are rectangles of M×N adjacent grid cells (1×1 or more). Each grid area is bounded by two pairs of grid lines (a pair of vertical lines and a pair of horizontal lines). Grid elements are placed within the grid area.

Grid areas can also be named.

Grid track

A grid track is a space between two adjacent grid lines (vertical or horizontal). It’s the analogue of border-spacing in a table.

.container { 
    grid-column-gap: 10px;
    grid-row-gap: 15px; 
}

The difference between Grid and Flex-box

Flexbox allows you to manage elements in one-dimensional space.

A grid is a two-dimensional array (both columns and rows are used).

This gives us a lot of advantages for adaptive transformation and rebuilding.

.grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 100px auto 100px;
}

Short record (rows / column).

.grid {
	grid-template: 100px auto 100px / 1fr 1fr 1fr 1fr;
}

 

 Lines and location of elements

In the CSS Grid, you can place items using line numbers.

It’s possible to name rows using grid-area and it’s also possible to bind rows to the grid area.

.wrapper {
  display: grid;
  grid-template-areas:
  "a a b"
  "a a b"
  "c d d";
}
.item1 {grid-area: a;}
.item2 {grid-area: b;}
.item2 {grid-area: c;}
.item2 {grid-area: d;}

 

Dimensions of the bands (tracks)

Grids can be created with fixed sizes (px), relative sizes (em, rem), and flexible sizes (% or fr).

Fr (fraction) is not measured in the usual units such as px, em, and rem but is calculated independently.

Calculation in fr

Example

If the available space is 900 px and the first element gets one share and the second element gets two shares, then the first element gets 1/3 of 900 px and the second gets 2/3 of 900 px.

<div class="grid">
  <div class="box item1">Item 1</div>
  <div class="box item2">Item 2</div>
  <div class="box item3">Item 3</div>
  <div class="box item4">Item 4</div>
</div>
 
.grid {
  display: grid;
  grid-gap:20px;
  grid-template: 100px auto 100px /1fr 80px 3fr 20%;
}

 

Axes of Grid elements

In the Grid, we have two axes for aligning elements.

The column axis

When we use the align-self and align-items properties, we change the alignment of the element placed in the grid area. The align-items property sets the align-self property for all subsidiary grid elements. You can set the property for an individual element using align-self on the grid element.

The row axis

Justify-items and justify-self controls the row/inline axis:

<div class="grid">
  <div class="box item1">Item 1</div>
  <div class="box item2">Item 2</div>
  <div class="box item3">Item 3</div>
  <div class="box item4">Item 4</div>
</div>
 
.grid {
  display: grid;
  grid-gap:20px;
  grid-template: 100px auto 100px / 1fr 1fr 1fr 1fr;
  align-items: stretch;
}
.item1 {
  background: #f00;
  align-self: end;
}
.item2 {
  background: #f0f;
  align-self: flex-start;
}
.item3 {
  background: #008000;
  align-self: end;
}
.item4 {
  background: #000;
}

 

 Preprocessors

The Sass and Less preprocessors support the CSS Grid. Stylus and PostCSS also work with CSS Grid.

Software

Google Chrome and Mozilla Firefox highlight the grid with the Firebug extension.

For Chrome, there’s an extension called Gridman that’s a CSS Grid inspector.

Support

CSS grids are already supported in Safari 10.3, Firefox 61, and Chrome 63.

In Internet Explorer 10 and IExplorer 11, the prefix -ms- is used to define Grid properties. Unfortunately, these browsers only support one of the earliest limited 2011 Grid Layout specifications.

The modern version differs much from the previous.

Internet Explorer Grid support lacks:

• Automatic placement.
• It’s necessary to place each element in the grid using linear positioning.
• Implementation of the following properties:

grid-gap

grid-template

grid-template-areas

grid-auto-columns

grid-auto-rows

grid-auto-flow

grid-row-end

grid-column-end

grid-area

grid-row-gap

grid-column-gap

grid-gap

justify-self

This is not a complete list of changes to the specification.

Does it make sense to use Grid Layout in Internet Explorer in general?

If you use CSS Grid, positioning elements using CSS instead of using automatic placement, the grid in Internet Explorer 10 can be very useful.

Here’s an example of a basic grid for Internet Explorer:

<div class="grid">
  <div class="box item1">Item 1</div>
  <div class="box item2">Item 2</div>
  <div class="box item3">Item 3</div>
  <div class="box item4">Item 4</div>
</div>
 
.grid {
	display: -ms-grid;
  -ms-grid-columns: 1fr 1fr 1fr 1fr;
  -ms-grid-rows: 4fr;
}
.item1 {
  -ms-grid-column: 1;
  -ms-grid-row: 1;
}
.item2 {
  -ms-grid-column: 2;
  -ms-grid-row: 1;
}
.item3 {
  -ms-grid-column: 3;
  -ms-grid-row: 1;
}
.item4 {
  -ms-grid-column: 4;
  -ms-grid-row: 1;
}

 

 Conclusions

CSS Grid gives developers new and powerful opportunities, but full implementation is still hindered by insufficient support in Internet Explorer 10 and 11 browsers (vendor prefixes only support some properties).

Pros

• Makes HTML cleaner (markup is easier, lack of multiple classes and additional tags)
• Simplifies the page layout
• Flexible and adaptive when working with elements
• Layout can be changed without affecting the HTML
• Ability to build blocks in two-dimensional space (layout takes into account horizontal and vertical space at the same time)
• No restrictions on the elements of the mesh layout
• Great for creating and managing large layouts
• Possible to create sites with dynamic content
• Media queries aren’t required to adapt to free space

Cons

• Partial support for Internet Explorer 10 and 11 browsers

The CSS Grid remains a revolutionary area for the web. Its capabilities in combination with other tools will allow developers to create more interesting and flexible layout design without superfluous styles and individualized frameworks. Enjoy!