Questions
16 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
16 / 21

What’s the difference between justify-content and align-content in Grid?

Understanding justify-content and align-content in CSS Grid

In CSS Grid, justify-content and align-content are used to control the alignment of the entire grid within its container when there is extra space. They work on the grid as a whole, not on individual grid items.

Key Differences
  1. 1

    justify-content aligns the grid horizontally (along the inline axis).

  2. 2

    align-content aligns the grid vertically (along the block axis).

  3. 3

    They only have an effect if the grid is smaller than its container in that axis.

  4. 4

    Common values include start, end, center, space-between, space-around, and space-evenly.

Example: Using justify-content and align-content