Common Grid Examples

CSS Grid Layout is one of the most powerful tools for modern web page layout, allowing developers to control both row alignment and column distribution simultaneously through a two-dimensional grid system. Unlike traditional Flexbox, which relies on the directionality of the parent container, Grid positions items based on explicit grid lines—both horizontal (rows) and vertical (columns). The key to mastering Grid lies in understanding three fundamental properties: grid-template-rows, grid-template-columns, and gap (the gap between cells), which together construct a predictable layout framework. In practical development, we typically define the grid template first, then place content into specific cells using either grid-area or individual grid-column/grid-row properties.
The first step in creating a grid is defining its structure. Using the grid-template-rows and grid-template-columns properties, we can specify how many rows and columns exist within the parent container, as well as the height or width of each row or column.

When defining these templates, you can use space-separated values to create multiple rows or columns. You can also use slashes / to mix length units with fractional unit sizes (such as fr). For example, if we want to create a grid with two rows and three columns—where the first row is tall, the second row is short, and all columns have equal width—we might set it up like this:

.container {
  display: grid;
  grid-template-rows: 100px 200px; /* Defines two rows with specific heights */
  grid-template-columns: repeat(3, 1fr); /* Creates three columns, each taking an equal share of remaining space */
  gap: 15px; /* Sets the spacing between cells */
}

The repeat() function is particularly useful here as it allows us to quickly generate repeated rows or columns. The unit 1fr stands for "fractional units," representing a proportional amount that automatically fills up remaining space. This enables layouts to adapt to content changes without manually calculating pixel values.

Positioning Content with Grid Areas

Once the grid template is defined, we need to place child elements into specific cells within it. CSS Grid offers two primary methods for positioning content: using the grid-area property to directly specify a named area, or separately specifying start and end lines using grid-column and grid-row.

It is recommended to use grid-area because its semantics are clearer and the code is easier to maintain. We must first define grid areas by either using pseudo-elements like :before or :after, or by adding placeholder elements with class names in HTML (e.g., header, main, sidebar). Assuming we have defined four distinct areas in our HTML structure as follows:

<div class="grid-container">
  <div class="area-header">Header</div>
  <div class="area-sidebar">Sidebar</div>
  <div class="area-main">Main Content</div>
  <div class="area-footer">Footer</div>
</div>

The corresponding CSS code would look like this:

.area-header { grid-area: header; }
.area-sidebar { grid-area: sidebar; }
.area-main { grid-area: main; }
.area-footer { grid-area: footer; }

This approach not only reduces the complexity of calculating row and column indices but also enhances code readability. When we need to adjust the layout, we simply modify area names or update the grid template without needing to recalculate mathematical relationships.

Achieving Responsive Layouts with Auto-Sizing Units

A significant advantage of Grid is its ability to handle responsive layout requirements effortlessly. By mixing fixed units (such as px and %) with fractional units (fr), we can create layouts that maintain good proportions across various screen sizes.

For instance, in a common three-column layout scenario where the left sidebar has a fixed width of 200 pixels while the right content area expands to fill remaining space, we might define the column template as follows:

.columns {
  grid-template-columns: 200px 1fr;
}

If we want the middle content area to occupy more space on mobile devices or maintain a two-column structure on desktop screens, we can dynamically adjust grid-template-columns using media queries. When screen width is less than 600 pixels, the layout could be changed to a single column:

@media (max-width: 600px) {
  .columns {
    grid-template-columns: 1fr;
  }
}

This strategy allows Grid to seamlessly adapt to various devices—from smartphones to wide monitors—without requiring extensive media queries to adjust complex float or absolute positioning structures.

Practical Example: Building a News Site Layout

To demonstrate the practical application of Grid more intuitively, let's construct a typical news site layout featuring a top navigation bar, left-side category sidebar, central article list, and bottom footer section.

The HTML structure is as follows:

<article class="news-grid">
  <header class="nav-area">Navigation</header>
  <aside class="sidebar-area">Categories</aside>
  <main class="content-area">Article List</main>
  <footer class="footer-area">Footer</footer>
</article>

CSS implementation:

.news-grid {
  display: grid;
  grid-template-rows: auto 1fr auto; /* Header and footer adapt automatically, middle area fills remaining space */
  grid-template-columns: 250px 1fr; /* Sidebar has fixed width, content area adapts */
  gap: 20px;
  height: 100vh;
}

.nav-area { grid-row: 1 / span 3; } /* Navigation spans all rows */
.sidebar-area { grid-column: 1; }
.content-area { grid-column: 2; }
.footer-area { grid-row: 3 / span 3; } /* Footer spans all rows */

In this example, grid-row: 1 / span 3 indicates that the element starts at row one and spans across three rows of space. This syntax is more semantic and easier to maintain compared to traditional float or position: absolute. By adjusting the size of gap, we can quickly alter the breathing room between page elements without modifying underlying structures.

Summary and Best Practices

CSS Grid not only simplifies two-dimensional layout implementation but also significantly boosts development efficiency. Before starting with Grid, it is advisable to plan out the number of rows/columns and area names in advance to avoid frequent adjustments that could lead to layout chaos during development. Additionally, making good use of fr units ensures layouts remain proportionally coordinated across different devices. Remember: the core principle of Grid lies in clearly separating "defining templates" from "placing content." Mastering these two points enables you to build modern web interfaces that are both aesthetically pleasing and robust.