Questions

10 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?

CSS

Text formatters

Pseudo elements

Transformation and Transition

Everything else

10 / 21

How do you create equal-width columns using Grid?

Creating Equal-Width Columns with CSS Grid

In CSS Grid, you can create equal-width columns using the grid-template-columns property with the repeat() function and the fractional unit (fr). The fr unit distributes available space evenly among columns.

Key Points

1
Use display: grid; to activate Grid layout.
2
Define columns with grid-template-columns: repeat(n, 1fr); where n is the number of columns.
3
The 1fr unit makes each column take an equal share of the available width.
4
You can use the gap property to add spacing between columns.

Example: Three Equal-Width Columns