Questions
6 of 21
1What is CSS Grid, and why is it used?
2How do you create a grid container in CSS?
3What is the difference between display: grid and display: inline-grid?
4What are grid tracks, grid lines, and grid cells?
5What are grid rows and grid columns and how do you define them?
6What does the grid-template-columns property do?
7What does the grid-template-rows property do?
8What is the purpose of the gap (or grid-gap) property?
9How is Grid different from Flexbox?
10How do you create equal-width columns using Grid?
11What does the repeat() function do in Grid?
12What is the use of fr units in Grid?
13How do you span an item across multiple columns or rows?
14What is the purpose of the grid-column and grid-row properties?
15What does grid-template-areas do?
16What’s the difference between justify-content and align-content in Grid?
17How can you position items using grid line numbers?
18When should you use Grid vs Flexbox? Can you combine Grid and Flexbox in the same layout?
19How is Grid different from using floats or positioning? How does Grid handle overlapping elements?
20What is the difference between align-content in Grid and in Flexbox?
21How can you reorder elements visually using Grid without changing HTML structure?
CSSCSS
Basics
Selectors
Box model
Text formatters
Positioning
Pseudo classes
Pseudo elements
Flexbox
Grid
Display
Combinators
Overflow
Breakpoint
Transformation and Transition
Frameworks
Everything else
06 / 21

What does the grid-template-columns property do?

Understanding grid-template-columns in CSS Grid

The grid-template-columns property in CSS Grid defines the number, size, and width of the columns in a grid container. It sets up the vertical tracks along which grid items are placed.

Key Points
  1. 1

    Defines the number of columns in the grid.

  2. 2

    Specifies the width of each column using lengths (px, em), percentages (%), fractions (fr), or auto.

  3. 3

    Supports the repeat() function for repeating columns with the same size.

  4. 4

    Works in combination with grid-template-rows to define the full grid structure.

  5. 5

    Example: grid-template-columns: 1fr 2fr 1fr; creates three columns with the middle column twice as wide as the others.

Example: Using grid-template-columns