Building the Foundation: Creating Grid Containers in CSS

Unlock two-dimensional layouts by creating a grid container and defining its columns and rows—the cornerstone of modern web design.

Welcome! Today, we'll learn to build layouts with CSS Grid. The first step is to create a grid container.

.container {
  display: grid;
}

Creating a Grid Container

The first step to using CSS Grid is to create a grid container. You do this by setting the display property of an element to grid. This simple declaration unlocks the power of grid layout for all its direct children.

Defining Columns

grid-template-columns defines the tracks (columns) of your grid. You can specify the size and number of columns. For example, grid-template-columns: 100px 200px; creates two columns with fixed widths.

Defining Rows

Similarly, grid-template-rows defines the rows. You can set their height using various units. For example, grid-template-rows: 50px 100px; creates two rows with specified heights.

The Flexible 'fr' Unit

The fractional unit (fr) is a game-changer. It represents a fraction of the available space in the grid container. grid-template-columns: 1fr 2fr; creates two columns where the second is twice as wide as the first, and they adapt to the container's size.

Practice Zone

Interactive Test 1: Drag & Drop

Arrastra en el orden correspondiente.

Arrastra las opciones:

rows

columns

gap

Completa el código:

grid-template-______: 1fr 1fr;

grid-template-______: 100px 200px;

grid-______: 20px;

Unlock with Premium

Interactive Test 2: Fill in the Blanks

Rellena los huecos en cada casilla.

.container {
  display: ;
  grid-template-columns: ;
  gap: ;
}

Unlock with Premium

Practice Example: Code Editor

Create a grid with 3 equal-width columns and a 15px gap between them. Define two rows, the first being 100px tall and the second taking up the remaining space.

Basic Grid Properties

Property	Description
display: grid;	Defines a container as a grid.
grid-template-columns: repeat(3, 1fr);	Creates three columns of equal size.
grid-gap: 10px;	Defines the space between grid cells.
grid-template-rows: auto;	Rows automatically adjust to their content.
justify-items: center;	Aligns items inside the cells on the horizontal axis.
align-items: center;	Aligns items inside the cells on the vertical axis.

* Write your CSS code and apply it to see the results.

Results:

Unlock with Premium

Knowledge Check

Which property is essential to turn an element into a grid container?

Unlock with Premium

← Previous Next →

Advanced Grid Techniques

Once you've defined a container, you can unlock more advanced features for intuitive and powerful layouts. Let's explore some real-world examples.

1. Naming Areas with `grid-template-areas`

This property lets you name grid cells and create complex layouts visually. It's incredibly intuitive for placing items like headers, sidebars, and footers.

.container {
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

Header

Main

2. The `repeat()` Notation

Instead of writing out every column, you can use the repeat() function for cleaner code. repeat(12, 1fr) is much easier than writing `1fr` twelve times.

.gallery {
  display: grid;
  grid-template-columns: 
    repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}

Practical Takeaway: CSS Grid provides a complete toolkit for two-dimensional layout. Combine `grid-template-columns` and `grid-template-rows` with `gap` to create the fundamental structure of any design.