/

CSS Grid Tutorial - The Future of Web Layouts

CSS Grid Tutorial - The Future of Web Layouts

tags:web development, CSS Grid, layouts

CSS Grid is the new groundbreaking technology for building layouts using CSS. Although not fully supported by all browsers yet, it is expected to be the future system for web layouts. In this tutorial, we will explore the basics of CSS Grid and how it can revolutionize web design.

Introduction to CSS Grid

CSS Grid is a fundamentally new approach to building layouts using CSS. It works alongside Flexbox and can be used with it to create complex layouts that were previously difficult to implement.

Building layouts for the web has historically been complicated, with developers resorting to table layouts, floats, and other hacks. However, with CSS Grid and Flexbox, developers now have two powerful and well-supported tools to create modern web layouts.

The Basics of CSS Grid

To activate CSS Grid on an element, such as a div, simply set the display property to grid. CSS Grid allows you to define properties on both the container element and the individual items within the grid.

The most basic container properties are grid-template-columns and grid-template-rows, which define the number of columns and rows in the grid, as well as their width and height. For example, you can create a grid with 4 columns each 200px wide and 2 rows with a height of 300px each.

1
2
3
4
5
.container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 300px 300px;
}

Automatic Dimensions

CSS Grid also supports automatic dimensions, which are useful when you have a fixed header and footer size and a flexible main content area. You can use the auto keyword to achieve this.

1
2
3
4
.container {
  display: grid;
  grid-template-rows: 100px auto 100px;
}

Different Columns and Rows Dimensions

In addition to fixed dimensions, CSS Grid allows you to specify different dimensions for each column or row in the grid. This gives you the flexibility to create various designs and layouts.

1
2
3
4
5
.container {
  display: grid;
  grid-template-columns: 100px 200px;
  grid-template-rows: 100px 50px;
}

Adding Space between the Cells

By default, there is no space between the cells in a CSS Grid. However, you can add space between the rows and columns using the grid-column-gap and grid-row-gap properties, or the shorthand grid-gap property.

1
2
3
4
5
6
.container {
  display: grid;
  grid-template-columns: 100px 200px;
  grid-template-rows: 100px 50px;
  grid-gap: 25px;
}

Spawning Items on Multiple Columns and/or Rows

CSS Grid allows cells to occupy more than one box in a row or column, expanding horizontally or vertically while respecting the grid proportions. You can achieve this using the grid-column-start, grid-column-end, grid-row-start, and grid-row-end properties.

1
2
3
4
5
6
7
8
9
10
11
12
13
.container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 300px 300px;
}
.item1 {
  grid-column-start: 2;
  grid-column-end: 4;
}
.item6 {
  grid-column-start: 3;
  grid-column-end: 5;
}

Shorthand syntax is also available using the grid-column and grid-row properties.

Using grid-area as a Shorthand

The grid-area property can be used as a shorthand for both grid-column and grid-row. It is especially useful when you need to apply both properties to a single element.

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

Using span

Another approach to specifying the size of a grid item is by using the span keyword. It allows you to set the starting column/row and specify how many columns/rows the item should occupy.

1
2
3
4
5
6
7
8
9
10
11
.container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 300px 300px;
}
.item1 {
  grid-column: 2 / span 2;
}
.item6 {
  grid-column: 3 / span 2;
}

More Grid Configuration

CSS Grid offers additional options for grid configuration, providing greater flexibility in creating layouts.

Using Fractions

Instead of specifying exact column or row widths, CSS Grid allows you to use fractions as a unit of space. For example, dividing a grid into 3 columns with the same width can be achieved using grid-template-columns: 1fr 1fr 1fr.

Using Percentages and Rem

In addition to fractions, CSS Grid supports percentages and rem units as well. You can mix and match these units to create more advanced layouts.

Using repeat()

The repeat() function is a powerful tool in CSS Grid, allowing you to repeat a specific layout a certain number of times. For example, grid-template-columns: repeat(4, 100px) creates 4 columns with the same width.

Specify a Minimum Width for a Row

CSS Grid provides a way to specify a minimum width for a row using the minmax() function. This is useful when you want to ensure that a sidebar or other element does not collapse below a certain width.

1
2
3
.container {
  grid-template-columns: minmax(200px, 3fr) 9fr;
}

Positioning Elements using grid-template-areas

By default, CSS Grid positions elements in the grid according to their order in the HTML structure. However, you can use the grid-template-areas property to define template areas and move elements around the grid. This is especially useful for complex layouts.

1
2
3
4
5
6
7
8
9
.container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 300px 300px;
  grid-template-areas:
    "header header header header"
    "sidebar main main main"
    "footer footer footer footer";
}

Wrapping Up

CSS Grid is a powerful tool that revolutionizes web layouts. With its ability to create responsive and flexible designs, it offers a new level of control and simplicity in building modern websites. By mastering the basics of CSS Grid, you will be well on your way to becoming a proficient user and creating stunning layouts for your web projects.