Grid rows and columns in CSS - Mini Project: Build & Apply

Grid rows and columns

📖 Scenario: You are creating a simple webpage layout using CSS Grid. The page will have a header, a sidebar, a main content area, and a footer arranged in a grid.

🎯 Goal: Build a CSS Grid layout with 3 rows and 3 columns. Place the header spanning all columns in the first row, the sidebar in the first column of the second row, the main content in the second and third columns of the second row, and the footer spanning all columns in the third row.

📋 What You'll Learn

Use CSS Grid to create the layout

Define grid rows and columns with correct sizes

Place grid items in correct grid cells using grid-row and grid-column

Use semantic HTML elements:

,

,

,

Ensure the layout is responsive and accessible

💡 Why This Matters

🌍 Real World

Grid layouts are common in modern websites to organize content clearly and responsively.

💼 Career

Understanding CSS Grid is essential for front-end developers to build flexible and accessible web page layouts.

1

Create the HTML structure

Write the HTML code to create a div with class container that contains four elements: a <header> with text 'Header', an <aside> with text 'Sidebar', a <main> with text 'Main Content', and a <footer> with text 'Footer'.

CSS

Hint

Use semantic tags inside the container div exactly as described.

2

Define the grid container with rows and columns

In CSS, select the class .container and set display: grid;. Then define the grid template with grid-template-columns as 1fr 2fr 1fr and grid-template-rows as auto 1fr auto.

CSS

  Header
  Sidebar
  Main Content
  Footer



.container {
  /* Your code here */
}

Hint

Use fractional units (fr) for columns and auto for rows as instructed.

3

Place the grid items in correct rows and columns

Add CSS rules to place the header to span all three columns in the first row using grid-column: 1 / 4; and grid-row: 1;. Place the aside in the first column of the second row with grid-column: 1; and grid-row: 2;. Place the main in columns 2 to 3 of the second row with grid-column: 2 / 4; and grid-row: 2;. Finally, place the footer spanning all columns in the third row with grid-column: 1 / 4; and grid-row: 3;.

CSS

  Header
  Sidebar
  Main Content
  Footer



.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto 1fr auto;
}
header {
  /* Your code here */
}
aside {
  /* Your code here */
}
main {
  /* Your code here */
}
footer {
  /* Your code here */
}

Hint

Use grid-column and grid-row properties exactly as described for each element.

4

Add basic styling and accessibility improvements

Add CSS to give each grid item a background color and padding: header background #8ca0ff, aside background #a0d8ef, main background #f0e68c, and footer background #d3a0f0. Add padding of 1rem to all. Also add aria-label attributes to aside as 'Sidebar' and main as 'Main content' in the HTML for accessibility.

CSS

  Header
  Sidebar 
  Main Content 
  Footer



.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto 1fr auto;
}
header {
  grid-column: 1 / 4;
  grid-row: 1;
  /* Your code here */
}
aside {
  grid-column: 1;
  grid-row: 2;
  /* Your code here */
}
main {
  grid-column: 2 / 4;
  grid-row: 2;
  /* Your code here */
}
footer {
  grid-column: 1 / 4;
  grid-row: 3;
  /* Your code here */
}

Hint

Add background colors and padding exactly as specified. Add aria-label attributes to aside and main tags.

Practice

1. What does the CSS property grid-template-columns control in a grid layout?

easy

A. The number and width of columns in the grid

B. The number and height of rows in the grid

C. The gap between grid items

D. The background color of the grid container

Solution

1. Step 1: Understand the property name

   The property name grid-template-columns suggests it controls columns.

2. Step 2: Recall grid layout basics

   This property sets how many columns there are and their widths.

3. Final Answer:

   The number and width of columns in the grid -> Option A

4. Quick Check:

   grid-template-columns = columns control [OK]

Hint: Columns = grid-template-columns, rows = grid-template-rows [OK]

Common Mistakes:

• Confusing columns with rows
• Thinking it controls gaps
• Mixing it with background styles

2. Which of the following is the correct syntax to create a grid with 3 columns each 100px wide?

easy

A. grid-template-columns: repeat(3, 100px);

B. grid-template-columns: 3x 100px;

C. grid-template-columns: 100px, 100px, 100px;

D. grid-template-columns: 100px * 3;

Solution

1. Step 1: Identify valid CSS syntax for repeating columns

   The repeat() function is the correct way to repeat values in grid-template-columns.

2. Step 2: Check each option

   grid-template-columns: 100px, 100px, 100px; uses commas (invalid); B: '3x 100px' invalid; C: repeat(3, 100px) correct; D: '* 3' invalid CSS syntax.

3. Final Answer:

   grid-template-columns: repeat(3, 100px); -> Option A

4. Quick Check:

   Use repeat() for repeating columns [OK]

Hint: Use repeat() to simplify repeated column sizes [OK]

Common Mistakes:

• Writing invalid CSS like '3x 100px'
• Using commas between column sizes
• Using multiplication syntax not supported in CSS

3. Given the CSS below, how many rows and columns will the grid have?

display: grid;
grid-template-columns: 150px 1fr 2fr;
grid-template-rows: 100px auto;

medium

A. 2 columns and 2 rows

B. 2 columns and 3 rows

C. 3 columns and 3 rows

D. 3 columns and 2 rows

Solution

1. Step 1: Count columns from grid-template-columns

   There are three values: 150px, 1fr, 2fr, so 3 columns.

2. Step 2: Count rows from grid-template-rows

   There are two values: 100px and auto, so 2 rows.

3. Final Answer:

   3 columns and 2 rows -> Option D

4. Quick Check:

   Count values in columns and rows properties [OK]

Hint: Count values in grid-template-columns and grid-template-rows [OK]

Common Mistakes:

• Mixing up rows and columns count
• Assuming 'auto' adds extra rows
• Ignoring fractional units

4. Identify the error in this CSS grid code:

display: grid;
grid-template-columns: 100px, 200px, 100px;
grid-template-rows: 50px 50px;

medium

A. grid-template-rows must have commas between values

B. Commas should not be used between column sizes

C. display: grid; should be display: grid-container;

D. Column sizes must all be the same unit

Solution

1. Step 1: Check syntax for grid-template-columns

   Values should be space-separated, not comma-separated.

2. Step 2: Verify other options

   grid-template-rows is correct without commas; display: grid is valid; units can differ.

3. Final Answer:

   Commas should not be used between column sizes -> Option B

4. Quick Check:

   Grid values are space-separated, not comma-separated [OK]

Hint: Use spaces, not commas, between grid sizes [OK]

Common Mistakes:

• Using commas between grid sizes
• Changing display property incorrectly
• Thinking units must match

5. You want a grid with 4 equal columns and 3 rows where the first row is 100px tall and the others share remaining space equally. Which CSS is correct?

hard

A. grid-template-columns: repeat(3, 1fr); grid-template-rows: 100px 1fr 1fr 1fr;

B. grid-template-columns: 4fr; grid-template-rows: 100px auto auto;

C. grid-template-columns: repeat(4, 1fr); grid-template-rows: 100px 1fr 1fr;

D. grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 100px 100px 100px;

Solution

1. Step 1: Set 4 equal columns

   Using repeat(4, 1fr) creates 4 columns each taking equal space.

2. Step 2: Define 3 rows with first fixed and others flexible

   grid-template-rows: 100px 1fr 1fr; sets first row fixed 100px, next two share remaining space equally.

3. Final Answer:

   grid-template-columns: repeat(4, 1fr); grid-template-rows: 100px 1fr 1fr; -> Option C

4. Quick Check:

   repeat() for columns, fixed + fractional rows [OK]

Hint: Use repeat() for equal columns and 1fr for flexible rows [OK]

Common Mistakes:

• Wrong number of columns or rows
• Using auto instead of 1fr for equal space
• Setting all rows fixed height