CSS Grid Layout: Basics and Examples

CSS Grid Layout is a powerful two-dimensional layout system that allows you to create complex web layouts with ease. This guide will cover the basics of CSS Grid Layout and provide practical examples.

What is CSS Grid Layout?#

CSS Grid Layout is a layout system that allows you to create grid-based layouts using rows and columns. It provides a more flexible and efficient way to design web layouts compared to traditional methods.

Basic Concepts#

Grid Container#

To use CSS Grid Layout, you need a grid container. You can create a grid container by setting the display property to grid.

.container {
  display: grid;
}

Grid Items#

The direct children of a grid container are called grid items. These items will be arranged according to the grid container’s properties.

Grid Container Properties#

`grid-template-columns` and `grid-template-rows`#

The grid-template-columns and grid-template-rows properties define the number and size of columns and rows in the grid.

.container {
  grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */
  grid-template-rows: auto; /* Rows will adjust to content */
}

`grid-gap`#

The grid-gap property defines the space between grid items.

.container {
  grid-gap: 10px;
}

`justify-items` and `align-items`#

The justify-items and align-items properties align the grid items within their grid areas.

.container {
  justify-items: center; /* Align items horizontally */
  align-items: center; /* Align items vertically */
}

Grid Item Properties#

`grid-column` and `grid-row`#

The grid-column and grid-row properties define the position and span of grid items.

.item {
  grid-column: 1 / 3; /* Span from column 1 to 3 */
  grid-row: 1 / 2; /* Span from row 1 to 2 */
}

`justify-self` and `align-self`#

The justify-self and align-self properties allow the default alignment to be overridden for individual grid items.

.item {
  justify-self: start; /* Align item horizontally */
  align-self: end; /* Align item vertically */
}

Practical Examples#

Example 1: Simple Grid Layout#

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

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}

.item {
  background-color: #ccc;
  padding: 20px;
  text-align: center;
}

Example 2: Complex Grid Layout#

<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
</div>

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

.item1 {
  grid-column: 1 / 3;
}

.item2 {
  grid-column: 3 / 4;
}

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

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

.item {
  background-color: #ccc;
  padding: 20px;
  text-align: center;
}

Example 3: Responsive Grid Layout#

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

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-gap: 10px;
}

.item {
  background-color: #ccc;
  padding: 20px;
  text-align: center;
}

Conclusion#

CSS Grid Layout is a powerful tool for creating complex and responsive web layouts. By understanding the basic concepts and properties, you can start using CSS Grid Layout to design flexible and efficient layouts.

For more information, check out the MDN Web Docs on CSS Grid Layout.