The grid system is an underrated but one of the most powerful design systems to organize layouts. Grids are getting extremely popular in web development because it enables designers to create different types of complex designs and layouts as it is flexible and provides a consistent experience across different devices. 

With grids, you can provide structure to various types of websites ranging from blogs to portfolio websites, news websites to social networking sites. The grid layout is a combination of rows and columns that making web page designing easier without having to use floats and positioning. In this article we have highlighted some of the top things you should know about the CSS grid layout.

1. Examples of a Grid Layout

An image gallery layout is a classic example of a design layout that uses grid layout the most. The grid design works great here because it can showcase many items/images in a limited space. See image below for an example.

2. Grid Layout VS Flexbox

The Flexbox layout is a great CSS layout system that is being used by many modern web designs. Although grid layout and flexbox share many common features there are some distinguishing differences between them too. One of the most striking difference is that flexbox was designed for layout in one dimension whereas the grid layout was designed for two-dimensional layouts. 

With a flexbox you can control the layout by either a row or a column. A grid layout allows you to design the layout by controlling both the row and the column. Because of these properties, more often than not, grid layouts are used for more complex layout designs. Flexbox layouts are great to build simpler and small layouts.

3. Defining a Grid Layout

To define a grid layout, let’s create a container and declare the grid. We can use grid-template-columns and grid-template-rows properties to define the number of rows and columns along with their respective sizes. If you want to create 3 columns and 3 rows, you can give the value three times.

.container {
  display: gird;
  grid-template–columns: 250px 250px 250px;
  grid-template-rows: 200px 200px 200px;
}

4. Explicit Grid Layout

Grid layouts give us the flexibility to create explicit Grid Layout. Explicit grid layouts enable additional rows and columns to be added to the layout as and when needed. It can add as many columns or rows that can fit the container. For that to work, we need to define the rows and columns in fraction units (fr). The fraction unit represents a fraction of the available space in the container.

.container {
  display: gird;
  grid-template–columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

To reduce the code we can use the repeat() function:

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

5. Mind the Grid Gap

In a grid layout, sometimes we will need to create gaps (or spacings) between rows and columns. This gap acts much like a column gap in a multiple-column layout.

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

6. Split the Grid

With a grid layout, you can split the rows and columns as needed. You can control how the items need to be aligned. In this example, we have created 3 columns but the units add up to 4. Space is split into 4 equal parts, the first 2 tracks are given 1 part, the last track is given 2 parts.

.container {
  display: gird;
  grid-template–columns: 1fr 1fr 2fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 15px;
}

7. Mixed Fractions

For convenience sake, you can also mix fraction units with other length units and values like px and %. A fraction unit (fr) shares the space left after fixed size tracks and gaps have been defined.

.container {
  display: gird;
  grid-template–columns: 500px 1fr 2fr;
  grid-template-rows: 1fr 1fr 1fr;
}

Image Credits

8. Implicit or Explicit Grids

In grid layouts, you can define the columns and their sizes explicitly using the grid-template–columns and same for rows. But you can also define the size of implicit rows or columns with properties:

-grid-auto-rows
-grid-auto-columns

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

9. The Auto-fill Feature

The auto-fill feature is one of the best things about the Grid layout design system. Not only does it help in reducing work, it also enables browsers to handle responsiveness beautifully. If you want to create a layout with 10 columns, you can use the repeat() function and auto place the items in the columns which will then resize according to the viewports.

.container {
  display: gird;
  grid-template–columns: repeat(auto-fill, 200px);
}

10. Flexible Grids with minmax()

The minmax() function defines a size range to greater than or equal to min and less than equal to the max range specified. This feature is very useful to create a responsive view without using media query. You could also specify your maximum range as auto which will stretch the size to the tallest item in the cell.

.container {
  display: gird;
  grid-template–columns: repeat(auto-fill, minmax(200px, 1fr));
}

Browsers that support Grid Layouts