Academy / Intermediate Level: HTML and CSS

HTML Elements and Semantic Structure

CSS Grid: Two-Dimensional Layouts

CSS Grid Layout is a powerful layout system that allows you to design complex, two-dimensional layouts. Unlike Flexbox, which works best for one-dimensional layouts (either rows or columns), CSS Grid excels in creating both rows and columns at the same time, giving you fine control over the layout of your web pages.

With CSS Grid, you can create layouts that include:

  • Multi-row and multi-column designs.
  • Overlapping grid items.
  • Explicit control over the size and placement of grid items.

What You Will Learn:

  1. The CSS Grid Basics
  2. Creating Grid Containers and Grid Items
  3. Grid Tracks (Columns and Rows)
  4. Placing Items in the Grid
  5. Grid Template Areas
  6. Responsive Grids with Media Queries
  7. Advanced Grid Features and Functions

1. The CSS Grid Basics

CSS Grid uses a grid container and grid items. To use CSS Grid, you need to define a container as a grid by setting its display property to grid.

Basic Grid Setup:

<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; /* Turns the container into a grid */
}

2. Creating Grid Containers and Grid Items

Grid layout starts with a grid container, which defines the structure of the grid. Inside the container, you can define grid items, which are the children of the grid container.

Defining Columns and Rows:

The basic syntax for defining rows and columns is done using the grid-template-columns and grid-template-rows properties.

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr; /* Two columns: the first takes 1 fraction, the second takes 2 fractions */
  grid-template-rows: auto 100px; /* Two rows: the first adapts to the content, the second is 100px high */
}
  • 1fr means "one fraction of the available space."
  • auto means the size is determined by the content.

Example:

<div class="grid-container">
  <div class="grid-item">Header</div>
  <div class="grid-item">Sidebar</div>
  <div class="grid-item">Main Content</div>
  <div class="grid-item">Footer</div>
</div>
.grid-container {
  display: grid;
  grid-template-columns: 1fr 3fr; /* Sidebar takes 1 part, Main Content takes 3 parts */
  grid-template-rows: auto auto auto; /* Rows will adjust to content size */
}

3. Grid Tracks (Columns and Rows)

A grid track is a row or a column. You can define the number and size of tracks (columns and rows) using these properties:

grid-template-columns and grid-template-rows:

These properties define the size of each column and row in the grid.

.grid-container {
  grid-template-columns: 100px 1fr 2fr; /* 3 columns: first is 100px, second takes 1 part, third takes 2 parts */
  grid-template-rows: auto 200px; /* 2 rows: first adapts to content, second is 200px high */
}
  • Fixed sizes: Columns or rows can have fixed sizes, like 100px or 200px.
  • Flexible sizes: Using fr (fractions), you can create flexible layouts where the remaining space is divided proportionally.

repeat() function:

The repeat() function simplifies the process of creating multiple grid tracks with the same size.

cssCopy code.grid-container {
  grid-template-columns: repeat(3, 1fr); /* Creates 3 equal-width columns */
}

4. Placing Items in the Grid

Once the grid is set up, you can place grid items explicitly in specific rows and columns.

grid-column and grid-row:

These properties allow you to position an item within the grid. You can specify which column or row a grid item should start and end.

.grid-item:nth-child(1) {
  grid-column: 1 / 3; /* The item spans from column 1 to column 3 */
  grid-row: 1;        /* The item is placed in the first row */
}

Example:

<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>
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.grid-item:nth-child(1) {
  grid-column: 1 / span 2; /* Item 1 spans two columns */
}

You can use span to make items span across multiple columns or rows.

5. Grid Template Areas

The grid-template-areas property allows you to assign names to sections of the grid and then place items into those named areas. This makes the layout more intuitive and readable.

Example with Grid Areas:

<div class="grid-container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">Main Content</div>
  <div class="footer">Footer</div>
</div>
cssCopy code.grid-container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.footer {
  grid-area: footer;
}

In this example:

  • The grid-template-areas property defines the layout by using named areas (header, sidebar, content, footer).
  • The grid items are placed into their corresponding areas using the grid-area property.

6. Responsive Grids with Media Queries

CSS Grid works beautifully for creating responsive layouts. By combining media queries with grid properties, you can adapt the layout based on the screen size.

Example of a Responsive Grid:

/* Default layout for large screens */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 3fr; /* Sidebar and Main Content */
}

/* For small screens, change to a single-column layout */
@media (max-width: 600px) {
  .grid-container {
    grid-template-columns: 1fr; /* One-column layout */
  }
}

With this approach, you can make your grid automatically adjust for different screen sizes, making your design fully responsive.

7. Advanced Grid Features and Functions

minmax() function:

The minmax() function lets you define a size range for grid tracks, ensuring that they stay within a minimum and maximum value.

.grid-container {
  grid-template-columns: repeat(3, minmax(100px, 1fr)); /* 3 columns, each at least 100px, but flexible */
}

auto-fit and auto-fill:

These functions automatically fill the grid with as many columns (or rows) as will fit in the container, making your grid flexible based on screen size.

  • auto-fit: Expands the columns to fill the available space.
  • auto-fill: Fills the available space with columns but doesn’t stretch them.
.grid-container {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

In this example, the grid will create as many columns as can fit in the container, with each column having a minimum width of 150px and growing to fill available space.

grid-auto-rows and grid-auto-columns:

If you don’t explicitly define the number of rows or columns, Grid will create them automatically based on the content. You can control their size with grid-auto-rows and grid-auto-columns.

.grid-container {
  grid-auto-rows: 100px; /* Automatically create rows with a height of 100px */
}

Key Takeaways

  • CSS Grid is a powerful system for creating complex, responsive layouts with rows and columns.
  • Use grid-template-columns and grid-template-rows to define the structure of your grid.
  • You can explicitly position grid items with grid-column and grid-row or use named areas with grid-template-areas.
  • Responsive grids can be easily created using media queries and the flexibility of grid tracks.
  • Advanced functions like minmax(), repeat(), auto-fit, and auto-fill allow for greater control over your layouts.