UI Development

All you need to know about CSS Grid Layout

CSS Grid Layout is a 2D layout system based on grids, which works with columns and rows.
Earlier., tables, floats, positions, etc. were the essential methods. Flexbox helped with more important utilities like vertical centering, but it was intended for simpler one-dimensional layouts.

For complex responsive layouts with two-dimensions, we have the CSS Grid layout system. It gives us the ability to reposition and resize items anywhere within the defined grid, instead of nesting multiple <div>s to achieve the same effect. Also, with each element having its own area on the grid, we can eliminate the risk of overlapping due to text size change, more content or small viewports.

What is a Grid?

A grid is an intersecting set of horizontal and vertical lines. The horizontal set defines rows, and the vertical set defines columns. Elements can be placed onto the grid, within these row and column lines.

What does a Grid contain?

CSS Grid layout system has some important terminology. The image below shows a schematic overview of a CSS Grid:

grid layout

  • Grid Container: It is the direct parent of all the grid items. display: grid needs to be applied to this parent in order to activate the CSS Grid layout.
  • Grid Line: Grid lines make up the structure of the grid. They can be either vertical or horizontal and reside on either side of a row or column. Lines are numbered according to the writing mode of the document. In a left-to-right language, line 1 is on the left-hand side of the grid. In a right-to-left language, it is on the right-hand side of the grid. Grid Lines can also be named.
  • Grid Cell: The space between two adjacent row and two adjacent column grid lines. It is the smallest unit.
  • Grid Area: Any area on the Grid bound by four grid lines. Grid areas must be rectangular.
  • Grid Item: The direct descendants of the parent grid container.

 

Creating a Grid container

Let’s create a wrapper (container) to carry some numbered divs in it.

<body>
    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</body>

Now, to activate the grid system, let’s give the following property to the container. and some styles to the divs.

.container {
    display: grid;
    background-color: #2196F3;
    padding: 10px;
}
.container > div {
  background-color: #F3A921;
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

Defining Grid Column And Rows

Grid columns and rows are defined by adding CSS properties like grid-template-columns and grid-template-rows to the grid container.

grid-template-columns / grid-template-rows

The grid-template-columns property defines the number of columns in the grid layout. It also defines the width of each column. The value list defines the width of each column.

If the grid layout needs to have 4 columns, specify the width of the 4 columns, or auto if all columns should have the same width.

Similarly, the grid-template-rows property defines the height of each row.

.container {
    display: grid;
    background-color: #2196F3;
    padding: 10px; 
    
    grid-template-columns: 80px 90px auto 30px;
    /* or, grid-template-columns: auto auto auto auto; */
    grid-template-rows: 80px 120px;
}

The value provided can be a length, a percentage, or a fraction (fr).

grid-column-gap / grid-row-gap

With grid-column-gap and grid-row-gap, we can add gaps between cells.

.container {
    display: grid;
    background-color: #2196F3;
    padding: 10px; 
    grid-template-columns: 80px 90px auto 30px;
    grid-template-rows: 80px 120px;
    
    grid-column-gap: 40px;
    grid-row-gap: 20px;
    /* or, grid-gap: 20px 40px; */
}

shorthand notation: grid-gap: <grid-row-gap> <grid-column-gap>;

Let’s see an output screenshot of what has been done so far:

grid gap

Alignment

justify-items and justify-self align items along the row axis, and align-items and align-self align items along the column axis.

justify-items support the following values:

  • start: aligns items to be flush with the start edge of their cell
  • end: aligns items to be flush with the end edge of their cell
  • center: aligns items in the center of their cell
  • stretch: fills the whole width of the cell (default)
.container {
  justify-items: start | end | center | stretch;
}

justify-self supports the following values:

  • start: aligns the grid item to be flush with the start edge of the cell
  • end: aligns the grid item to be flush with the end edge of the cell
  • center: aligns the grid item in the center of the cell
  • stretch: fills the whole width of the cell (default)
.item {
  justify-self: start | end | center | stretch;
}

align-items support the following values:

  • start: aligns items to be flush with the start edge of their cell
  • end: aligns items to be flush with the end edge of their cell
  • center: aligns items in the center of their cell
  • stretch: fills the whole height of the cell (default)
.container {
  align-items: start | end | center | stretch;
}

align-self supports the following values:

  • start: aligns the grid item to be flush with the start edge of the cell
  • end: aligns the grid item to be flush with the end edge of the cell
  • center: aligns the grid item in the center of the cell
  • stretch: fills the whole height of the cell (default)
.item {
  align-self: start | end | center | stretch;
}

Fiddle around with the alignment properties here.

Positioning the Grid items

By default, a grid container has one grid item for each column and each row, but the grid items can be styled in a way that they span multiple columns and/or rows. To specify the position with these properties, we have to take the grid lines as reference. These grid lines are numbered starting from 1, by default (both in rows and columns).

grid-column

The grid-column property defines which column(s) to place an item. We define where the item starts, and where it ends. grid-column property is a shorthand property for the grid-column-start and the grid-column-end properties.

Let’s add more grid items to demonstrate an example.

<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>  
  <div class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
  <div class="item13">13</div>
</div>

Let’s make “item2” start on line 2 and end on line 4. Similarly, let’s position some more grid items:

.container > .item2 {
  grid-column: 2 / 4;
}
.container > .item8 {
  grid-column: 1 / 3;
}
.container > .item13 {
  grid-column: 3 / 5;
}

The output looks as follows:

grid column

We can also use the keyword “span” to define how many columns the item will span.

.container > .item4 {
  grid-column: 1 / span 2;
}

grid column - span

grid-row

Similar to the grid-column, the grid-row property defines on which row to place an item. grid-row property is a shorthand property for the grid-row-start and the grid-row-end properties.

.item1 {
  grid-row: 1 / 4;
}
.item7 {
  grid-row: 2 /5;
}

grid row

Here also, the keyword “span” can be used to define how many rows the item will span.

.item4 {
  grid-row: 1 / span 2;
}

grid row span

CSS Grid vs Bootstrap

CSS grid is the new way of creating layouts on the web, and it is natively supported by browsers.
Hence it has a lot of advantages. These are a few reasons for why we can consider swapping out Bootstrap with CSS Grid:

  • Simpler Markup: With Bootstrap, we need plenty of divs even if we only have a couple of blocks in the layout.
  • More flexibility: Changing the layout is simple with CSS grids. We can just add some media-queries and shuffle around the items.
  • No more 12 columns limitation: Sometimes it’s annoying when the split columns do not sum up to twelve. With CSS Grid, we can make our own grid with exactly the amount of columns we want.
  • Control over default gutters: Bootstrap has default gutters for its rows and columns. They have to be overridden with !important property. But CSS Grids allows you to have complete control of our CSS classes.
  • Page load: Bootstrap is an external library and has to be downloaded. It does affect the loading time of the page(especially, when there are unnecessary features not being used on our page). On the contrary, there is no need to download any additional CSS to use CSS Grid!

Compatibility

As of Mid 2017, most browsers shipped native, unprefixed support for CSS Grid: Chrome (including on Android), Firefox, Safari (including on iOS), and Opera. Internet Explorer 10 and 11 on the other hand support it, but it’s an old implementation with an outdated syntax.

The browser support can be checked here.

About The Author