CSS Grid Layout Guide

CSS Grid Layout is a powerful web layout technique that allows developers to control page layouts more precisely by dividing containers into row and column grid structures. Below are the key concepts and usage patterns of CSS Grid:

  1. Grid Container: An element can be set as a grid container using the display: grid; property in CSS. The child elements of this element become grid items.
  2. Grid Rows and Columns: A grid container can be divided into multiple rows and columns. You can define the size, quantity, and layout of these rows and columns using the grid-template-rows and grid-template-columns properties. Sizes can be specified with fixed values (such as pixels or percentages) or flexible units (such as fr).
  3. Grid Cell: A grid cell is the intersection point where a row and column meet; each cell may contain one or more grid items. Grid items can span multiple cells, enabling flexible layouts.
  4. Grid Line: Grid lines are the dividers between rows and columns. You can define the position of grid items using named line references or their indices. Indices start at 1, and negative numbers can be used to represent positions relative to the end.
  5. Grid Track: A grid track is the area defined by two adjacent grid lines, encompassing either a row or a column. The size and layout of these tracks are controlled via grid-template-rows and grid-template-columns.
  6. Grid Area: A grid area is a rectangular region bounded by four grid lines (starting row, starting column, ending row, and ending column). You can define grid areas using the grid-template-areas property by assigning names to specific grid items.
  7. Grid Properties: In addition to the properties mentioned above, CSS Grid offers many other attributes, such as grid-gap (sets spacing between rows and columns), grid-auto-rows (defines the size of automatically assigned rows), and grid-auto-columns (defines the size of automatically assigned columns).

By utilizing grid layout, developers can flexibly control page layouts to implement complex structures and responsive designs. Grid Layout is applicable in various scenarios, including creating multi-column layouts, responsive web design, image galleries with masonry effects, and grid-based navigation. In modern CSS layout techniques, Grid Layout is regarded as a powerful and flexible alternative that can replace traditional float-based layouts and table-based layouts.

Examples

The following is an example of a simple grid layout:

HTML Code:

<!DOCTYPE html>
<html>
<head>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr; /* Divides the container into three equal columns */
      grid-gap: 10px; /* Sets spacing between rows and columns to 10px */
    }
    .item {
      background-color: #eaeaea;
      padding: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="grid-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>
</body>
</html>

In the example above, we create a grid layout containing six grid items. By setting the container element .grid-container as a grid container and using the grid-template-columns property to divide it into three equal columns:

Each grid item is a <div> element with the class name .item. We assign background colors, padding, and centered text alignment to these grid items.