Logo
Tutorials Articles Code Playground
Sign In Get Started
Module: CSS Layout

Grid layout

CSS Grid Layout

CSS Grid Layout is a powerful two-dimensional layout system for the web. It allows you to create complex layouts with rows and columns, offering more control and flexibility than traditional methods like floats or flexbox.

Core Concepts

  • Grid Container: The parent element that establishes the grid. You define it using display: grid or display: inline-grid.
  • Grid Items: The direct children of the grid container. These are automatically placed within the grid cells.
  • Grid Lines: The horizontal and vertical lines that define the grid structure.
  • Grid Tracks: The space between two adjacent grid lines. Rows are horizontal tracks, and columns are vertical tracks.
  • Grid Cells: The space between four intersecting grid lines.
  • Grid Areas: One or more grid cells.

Defining the Grid

You define the grid structure on the grid container using the following properties:

  • grid-template-columns: Defines the number and width of columns.
  • grid-template-rows: Defines the number and height of rows.
  • grid-template-areas: Allows you to name grid areas and define the layout visually.
  • grid-template: Shorthand for grid-template-columns and grid-template-rows.
  • grid-gap (or row-gap and column-gap): Specifies the gap between grid rows and columns. grid-gap is shorthand.
  • justify-items: Aligns grid items along the inline (horizontal) axis. Values: start, end, center, stretch (default).
  • align-items: Aligns grid items along the block (vertical) axis. Values: start, end, center, stretch (default).
  • justify-content: Distributes space within the grid container along the inline (horizontal) axis. Values: start, end, center, space-between, space-around, space-evenly.
  • align-content: Distributes space within the grid container along the block (vertical) axis. Values: start, end, center, space-between, space-around, space-evenly.

Example: Basic Grid

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

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Three equal-width columns */
  grid-template-rows: auto auto; /* Two rows with automatic height */
  grid-gap: 10px; /* 10px gap between rows and columns */
  background-color: #f0f0f0;
  padding: 10px;
}

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

This creates a grid with three columns and two rows. 1fr means "one fraction" of the available space. auto adjusts the row height to fit the content.

Positioning Grid Items

You can control the placement of grid items using these properties on the grid items:

  • grid-column-start / grid-column-end: Specifies the starting and ending grid lines for the column. Can also be written as grid-column: start / end; or grid-column: span n; (span across n columns).
  • grid-row-start / grid-row-end: Specifies the starting and ending grid lines for the row. Can also be written as grid-row: start / end; or grid-row: span n; (span across n rows).
  • grid-area: Assigns a grid item to a named grid area defined in grid-template-areas.
  • grid-column: Shorthand for grid-column-start and grid-column-end.
  • grid-row: Shorthand for grid-row-start and grid-row-end.

Example: Explicit Placement

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

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

.item1 {
  grid-column: 1 / 3; /* Spans from column line 1 to 3 */
  grid-row: 1;
}

.item2 {
  grid-column: 3;
  grid-row: 1;
}

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

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

This example explicitly places each item within the grid.

Using grid-template-areas

This provides a visual way to define the grid layout.

<div class="grid-container">
  <header>Header</header>
  <nav>Navigation</nav>
  <main>Main Content</main>
  <aside>Sidebar</aside>
  <footer>Footer</footer>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "nav main"
    "footer footer";
  grid-gap: 10px;
  height: 100vh; /* Make the grid container fill the viewport height */
}

header {
  grid-area: header;
  background-color: #333;
  color: white;
  padding: 10px;
}

nav {
  grid-area: nav;
  background-color: #444;
  color: white;
  padding: 10px;
}

main {
  grid-area: main;
  background-color: #eee;
  padding: 10px;
}

aside {
  grid-area: sidebar; /* Not used in this example, but could be added */
}

footer {
  grid-area: footer;
  background-color: #333;
  color: white;
  padding: 10px;
}

This creates a layout with a header, navigation, main content, and footer. The grid-template-areas property defines the layout visually using the names assigned to each area.

Responsive Grid

Grid layout is inherently responsive. You can use media queries to adjust the grid structure for different screen sizes.

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr; /* Single column layout on smaller screens */
    grid-template-areas:
      "header"
      "nav"
      "main"
      "footer";
  }
}

Repeat Notation

The repeat() function simplifies defining repetitive grid tracks.

grid-template-columns: repeat(3, 1fr); /* Equivalent to 1fr 1fr 1fr */
grid-template-rows: repeat(2, auto); /* Equivalent to auto auto */

minmax() Function

The minmax() function defines a size range for grid tracks.

grid-template-columns: minmax(100px, 1fr) 2fr; /* First column at least 100px, but can grow to fill available space */

Resources