How to build your site using CSS Grid Layout
Top

Before our time there were a lot of problems with positioning elements on web pages. At first there were tables, then floats, then positioning and inline-blocks, but all these methods were hacks and lost a lot of valuable functional opportunities, for example, vertical align. Afterwards the world was introduced to CSS Flexbox, but it was intended for easy one-dimensional layouts.

In early 2017, W3C released CSS Grid Layout – it’s a two-dimensional system of composition, which can help developers to process columns and row.

It’s a rather young technology, but in 2019, it was supported by all modern browsers. Only Internet Explorer 10 and 11 had partial support with prefixes, but it was easily fixed by using autoprefixers in your task manager (Gulp, Grunt, Webpack, etc.).

can i use

Either way, let’s move on to basic concepts. CSS Grid Layout was built on the following terms.

Base conceptions

Grid container – element where the following is used for property display: grid or display: inline-grid. It is the parent for all elements of grid.

grid container

Grid line – it’s a horizontal or vertical separator of grid containers. These lines are located on both sides of the column or row. Developers can set named elements of numbered index, which can in turn be used in styles. Numeration starts from the number one. Keep in mind, if you’re working with Arabic or any left to right language – numbering starts from the right side.

grid-line

Grid item – it’s the smallest structural unit of grid, which can be manipulated and formed at the intersection of columns and rows.

grid-item

Grid track – it’s space between the two closest lines. It can be presented like columns and rows.

grid-track

Grid area – it’s space inside a grid container, where developers can put one or more grid items.

grid-area

See a dynamic example below.

base terms

Start work

To start working with CSS Grid Layout you need to:

  1. Initialize the container with the help of display: grid or display: inline-grid.
  2. Set size of columns and rows.
  3. Position elements according to the numbers of the grid lines.
.grid-container {
  display: grid;
  grid-template-columns: 40px 50px 100px 50px 40px;
  grid-template-rows: 33% 33% 33%;
}

Below you’ll see, that it creates 5 columns with the following size 40px, 50px, 1fr, 50px, 50px and 3 rows 25%, 100px, auto.

creation of grid

You can see an interesting dimension here – 1fr, fr – it’s a new unit of measurement, which was added in the specification for the CSS Grid Layout. It’s not measured in any specific unit (px, em, rem etc). It means that it can’t be used with calc(). This unit of measurement can’t be less than one and can’t set negative values. It is calculated after all other values have been calculated.

auto – the action is rather interesting and uses canning algorithms to calculate the size. In some cases it may seem that this unit of measurement works like fr, but it does not. The main difference – auto is calculated after other sizes have been calculated.

Creating of Grid Area

Grid area and position can be created through grid-column-start, grid-column-end, grid-row-start, grid-row-end. These values indicate the start and end of column or row.

.grid-item-2 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}

This property has a shorthand: grid-column and grid-row, where the start and end of line is divided using a slash.

.grid-item-2 {
  grid-column: 2/4;
  grid-row: 1/3;
}

And another shorthand grid-area, where we can indicate the start-row/start-column/end-row/end-column.

.grid-item-2 {
  grid-area: 1/2/4/3;
}

Created area highlighted in red.

grid area creation

Setting of similar tracks

Similar tracks can be set with the help of function repeat(), which was added in the new CSS Grid Specification. Based on the name, repeat(), you can guess that this function is related to repetition and if you have a lot of similar tracks you can use it. This function accepts two parameters:

  1. Quantity of repetitive elements.
  2. The size of the element.

You can see examples of code below.

.grid-container {
  display: grid;
  grid-template-columns: 1fr, 1fr, 1fr;
  grid-template-rows: 250px, 250px, 250px;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows: repeat(3, 250px);
}
.grid-container {
  display: grid;
  grid-template-columns: 1fr, 1fr, 1fr;
  grid-template-rows: 250px, 250px, 250px;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows: repeat(3, 250px);
}

Scaling of tracks and function minmax()

Although it’s a new feature which was added with the new specification of CSS Grid Layout. This function can help us build more flexible layouts. It accepts two parameters, a minimum and maximum value. If the maximum value defined is actually less than the minimum, it is ignored, and the function is treated as purely presenting a minimum value.

The minmax() has 7 types of value:

  1. Length
  2. Percentage
  3. Flexible Length
  4. max-content
  5. min-content
  6. auto
  7. minmax(), auto-fit. Responsive design with mediaquary

Let’s stop and look at such properties as max-content, min-content and auto-fit

max-content – it’s a special value that represents the cell’s “ideal size”. This is the smallest possible size the cell can be, while still fitting around it’s contents unobtrusively.

min-content – it’s like max-content, a special value. It represents the smallest possible size the cell can be that does not lead to an overflow, unless that overflow is unavoidable.

auto-fit – it can be used with repeat() instead of the number of repetitions. This keyword flexibly changes the number of columns depending on the width of each one. One disadvantage is that it works only with an even number of columns, but in the right situation you can successfully use it and create responsive layouts without mediaqueries.

You can see link to Codepen that can help you better understand how it can be used in dynamical examples.
minmax function

Named grid-area

You’ve seen above that it’s possible to set grid areas and positioning tracks with number indexes, but CSS Grid Layout has a feature named grid areas.

You can choose any name for a grid, for example, if you need to create a template:

standart structure

You can name basic areas in this style: hd, main, sd, ft

The HTML structure looks like:

<div class="wrapper">
  <div class="holder"></div>
  <div class="sidebar"></div>
  <div class="content"></div>
  <div class="footer"></div>
</div>

The property grid-area sets a name for every item. Named areas aren’t created layout, but you have areas which can be used.

.header{
  grid-area: hd;
}
.footer {
  grid-area: ft;
}
.content {
  grid-area: main;
}
.sidebar {
  grid-area: sd;
}

Now, instead of numbered lines, names can be used and it’s created grid container.

.wrapper {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-template-areas: 
    "hd hd hd hd   hd   hd   hd   hd   hd"
    "sd sd sd main main main main main main"
    "sd sd sd  ft  ft   ft   ft   ft   ft";
}

Result can be seen below.

Named areas

Box Alignment

It’s a familiar kit from flexbox, which can help you align elements and containers.

It includes the following properties:

Properties for containers

  • justify-items
  • align-items
  • justify-content
  • align-content

Properties for elements

  • justify-self
  • align-self

For justify-content/align-content there are such values:

  1. start – align grid by left/top part of container
  2. end – align grid by right/bottom part of container
  3. center – align grid by center of container
  4. space-around – same place among elements and half spaces between borders.
  5. space-between – same place among elements, without spaces between borders.

For justify-items, align-items, justify-self, align-self there are such values:

  1. start – align grid by left/top part of area
  2. end – align grid by right/bottom part of area
  3. center – align grid by center of area
  4. stretch – fill all empty area

z-index in CSS Grid Layout

The new specification gives you the opportunity to use z-index without setting a position. For this you need to create tracks and position elements using grid-area. For each element you would like to impose you need to set the z-index.

See the example below.

z-index

Creating of landing page using CSS Grid Layout

Let’s talk about the conception of CSS Flexbox and CSS Grid Layout. CSS Grid Layout is recommended for the positioning of “large/main” elements on web pages unlike the CSS Flexbox, which you should use inside these elements. These two technologies perfectly work with each other.

Below we’ve created small landing pages with familiar blocks, like a header, sidebar, main, and footer. We used grid-template-areas, autofill, minmax() and CSS Grid Layout connected with CSS Flexbox.

See the example below

landing page

Own experience of using CSS Grid Layout

As for me, CSS Grid Layout is rather useful in current realities of frontend development, but I run into problems, when use it.

First of all, Grids have problems with overflow. When you use two grid containers one below the other, the last one flows inside the second one. It can be fixed, if the first block is wrapped up in section, not div.

Second of all, CSS Grid Layout has problems with loading dynamic content, because if we load content with static positioning, items will overlap each other. Perhaps, it will be possible to solve, using Sass cycles and change position with shifter.

Third, which flow from second, the Grid still can’t create a true masonry layout natively in CSS. It would be perfect, if it could be realized with the help of Grid Layout, but perhaps it will be implemented by the combination of flexbox and grid.

Conclusion

CSS Grid Layout is a rather powerful technology, which can help you create flexible layouts, certainly, grids has disadvantages and sometimes conception and positioning of items inside grid container are hard to understand, but don’t be afraid to use this technology in your projects, it can make your life easier!

Useful links

  1. CSS Grid Layout – Rachel Andrew | February 2017
  2. How the minmax() Function Works
  3. Supporting CSS Grid in Internet Explorer
  4. Grid by Example
up

Please turn your device