☰

CSS Grid

🔲Grid

Display: Grid Grid-template-columns Grid-template-rows Gap Justify-items Align-items Align-content Justify-content

Assignment

Assignment 1 Assignment 2
📍 display: grid
Definition: Converts an HTML element into a grid container that arranges its children (grid items) in rows and columns. This enables two-dimensional layout control with powerful alignment and sizing capabilities.
Default Value: display: block (not grid)
Value: grid | inline-grid

✦ Value 1: display: grid (Block-level Grid)

Creates a block-level grid container that takes full width available.
Item 1
Item 2
Item 3
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

✦ Value 2: display: inline-grid (Inline-level Grid)

Creates an inline-level grid container that only takes space needed by its content.
A
B
C
D
Text next to grid ← Inline-grid takes only needed space
.inline-grid {
  display: inline-grid;
  grid-template-columns: repeat(2, 80px);
  gap: 8px;
}

✦ Responsive Grid Example

Grid that adapts to different screen sizes using auto-fit.
Responsive
Grid Item
Auto-fit
Layout
.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
}
📍 grid-template-columns
Definition: Defines the number of columns in the grid and specifies the size of each column. Controls the width of columns and how space is distributed across the grid horizontally.
Default Value: auto (single column)
Values: px | em | % | fr | auto | repeat() | minmax() | auto-fit | auto-fill

✦ Value 1: Fixed Pixel Width (px)

Each column has a fixed width regardless of container size.
100px
150px
120px
grid-template-columns: 100px 150px 120px;

✦ Value 2: Fr Unit (Fractional)

Distributes available space proportionally using fr (fraction) units. 1fr = 1 equal portion, 2fr = 2 portions.
1fr
2fr
1fr
grid-template-columns: 1fr 2fr 1fr;

✦ Value 3: Percentage (%)

Each column takes a percentage of the container width.
25%
50%
25%
grid-template-columns: 25% 50% 25%;

✦ Value 4: repeat() Function

Creates multiple columns with the same size. repeat(count, size) creates count columns each of size.
1
2
3
4
grid-template-columns: repeat(4, 90px);

✦ Value 5: minmax() Function

Sets minimum and maximum column width. Useful for responsive designs: minmax(min, max).
min: 80px
max: 1fr
Flexible
grid-template-columns: repeat(3, minmax(80px, 1fr));

✦ Value 6: auto-fit & auto-fill

Creates columns automatically. auto-fit collapses empty tracks, auto-fill doesn't. Perfect for responsive layouts.
Auto Item 1
Auto Item 2
Auto Item 3
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

✦ Mixed Units Example

Combine different unit types in one declaration for flexible layouts.
Sidebar
150px
Main Content
1fr (flexible)
Widget
100px
grid-template-columns: 150px 1fr 100px;
/* Sidebar | Main | Widget */
📍 grid-template-rows
Definition: Defines the number of rows in the grid and specifies the height of each row. Controls the vertical sizing of rows and how space is distributed across them.
Default Value: auto (rows are sized by content)
Values: px | em | % | fr | auto | repeat() | minmax()

✦ Value 1: Fixed Height (px)

Each row has a fixed height in pixels.
Row 1 - 80px
Row 1 - 80px
Row 2 - 100px
Row 2 - 100px
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 80px 100px;

✦ Value 2: Fractional Unit (fr)

Rows share available height proportionally. Similar to columns, 1fr = 1 portion, 2fr = 2 portions.
Row 1 (1fr)
Row 1 (1fr)
Row 2 (2fr)
Row 2 (2fr)
grid-template-rows: 1fr 2fr;
/* Container must have defined height for fr to work */

✦ Value 3: Auto (Content-based)

Rows automatically size based on their content. Height adjusts to fit the content.
Short
Short
This one has more content so its row will be taller to accommodate all text
Just a bit
grid-template-rows: auto auto;

✦ Value 4: repeat() Function

Creates multiple rows with the same height. repeat(count, height).
1
2
3
4
5
6
7
8
9
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 70px);

✦ Value 5: minmax() with Rows

Set minimum and maximum row heights: minmax(min_height, max_height).
Min: 60px
Max: auto
Can grow with content if needed
Or stay at 60px
grid-template-rows: repeat(2, minmax(60px, auto));
📍 gap / grid-gap
Definition: Creates spacing (gutters) between grid rows and columns. Controls the distance between grid items. The gap property is a shorthand for row-gap and column-gap.
Default Value: 0 (no gap)
Shorthand Values: gap: row-gap column-gap | gap: all-gaps
Sub-properties: row-gap | column-gap

✦ Value 1: Single Value (Equal Gap)

Same spacing applied to both row and column gaps.
A
B
C
D
E
F
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px; /* All gaps = 15px */

✦ Value 2: Two Values (Row Gap & Column Gap)

Different spacing for rows and columns: gap: row-gap column-gap
A
B
C
D
E
F
gap: 25px 10px; /* row-gap=25px, column-gap=10px */

✦ Value 3: row-gap (Vertical Spacing Only)

Controls spacing between rows only.
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
row-gap: 30px; /* Large vertical spacing */
column-gap: 5px; /* Small horizontal spacing */

✦ Value 4: column-gap (Horizontal Spacing Only)

Controls spacing between columns only.
1
2
3
4
column-gap: 20px; /* Large horizontal spacing */
row-gap: 8px; /* Small vertical spacing */

✦ Value 5: Em Units (Relative Sizing)

Use em units for gap that scales with font size.
Em Units
Responsive
Design
gap: 1.5em; /* Scales with font-size */

✦ Value 6: Rem Units (Root Font Size)

Use rem for consistent spacing based on root font size.
Rem Units
Consistent
Spacing
gap: 1rem; /* Based on root (html) font-size */
📍 justify-items
Definition: Aligns grid items horizontally (inline axis) within their grid cells. Controls how items are positioned left-to-right inside each cell of the grid. Applies to all items in the grid container.
Default Value: stretch (items fill available width)
Values: start | center | end | stretch | auto

✦ Value 1: justify-items: start

Aligns items to the left edge of their cells.
Start Item
Start Item
Start Item
justify-items: start; /* Items align to left */

✦ Value 2: justify-items: center

Centers items horizontally within their cells.
Center Item
Center Item
Center Item
justify-items: center; /* Items centered horizontally */

✦ Value 3: justify-items: end

Aligns items to the right edge of their cells.
End Item
End Item
End Item
justify-items: end; /* Items align to right */

✦ Value 4: justify-items: stretch (Default)

Items stretch to fill entire width of their cells.
Stretch Item
Stretch Item
Stretch Item
justify-items: stretch; /* Default - fills width */

✦ Comparison: All Values

Visual comparison of all justify-items values side by side.
justify-items: start
▫
▫
▫
justify-items: center
▫
▫
▫
justify-items: end
▫
▫
▫
📍 align-items
Definition: Aligns grid items vertically (block axis) within their grid cells. Controls how items are positioned top-to-bottom inside each cell. Applies to all items in the grid container on the vertical axis.
Default Value: stretch (items fill available height)
Values: start | center | end | stretch | auto

✦ Value 1: align-items: start

Aligns items to the top edge of their cells.
Start
Start
Start
Start
Start
Start
align-items: start; /* Items align to top */

✦ Value 2: align-items: center

Centers items vertically within their cells.
Center
Center
Center
Center
Center
Center
align-items: center; /* Items centered vertically */

✦ Value 3: align-items: end

Aligns items to the bottom edge of their cells.
End
End
End
End
End
End
align-items: end; /* Items align to bottom */

✦ Value 4: align-items: stretch (Default)

Items stretch to fill entire height of their cells.
Stretch
Stretch
Stretch
Stretch
Stretch
Stretch
align-items: stretch; /* Default - fills height */

✦ Perfect Center Example

Combine justify-items: center and align-items: center for perfect centering.
🎯 Centered
🎯 Centered
🎯 Centered
🎯 Centered
justify-items: center;
align-items: center;
/* Both horizontal and vertical centering */
📍 justify-content
Definition: Aligns the entire grid horizontally within its container (inline axis). Controls how the grid as a whole is positioned when it doesn't fill the container's width. Different from justify-items which aligns items within cells.
Default Value: start
Values: start | center | end | space-between | space-around | space-evenly

✦ Value 1: justify-content: start

Aligns grid to the left side of container.
A
B
C
justify-content: start; /* Grid aligns to left */

✦ Value 2: justify-content: center

Aligns grid to the center of container horizontally.
A
B
C
justify-content: center; /* Grid centered horizontally */

✦ Value 3: justify-content: end

Aligns grid to the right side of container.
A
B
C
justify-content: end; /* Grid aligns to right */

✦ Value 4: justify-content: space-between

Distributes grid items with equal space between them. First and last items touch edges.
A
B
C
justify-content: space-between; /* Equal space between items */

✦ Value 5: justify-content: space-around

Distributes items with equal space around them. Space around each item is equal.
A
B
C
justify-content: space-around; /* Equal space around each item */

✦ Value 6: justify-content: space-evenly

Distributes items with perfectly equal space everywhere including edges.
A
B
C
justify-content: space-evenly; /* Perfect equal spacing everywhere */
📍 align-content
Definition: Aligns the entire grid vertically within its container (block axis). Controls how the grid as a whole is positioned when it doesn't fill the container's height. Only works when the grid has less height than the container. Different from align-items which aligns items within cells.
Default Value: stretch
Values: start | center | end | space-between | space-around | space-evenly | stretch

✦ Value 1: align-content: start

Aligns grid to the top of container.
1
2
3
4
5
6
align-content: start; /* Grid aligns to top */
height: 300px; /* Container must be taller than grid */

✦ Value 2: align-content: center

Aligns grid to the vertical center of container.
1
2
3
4
5
6
align-content: center; /* Grid centered vertically */

✦ Value 3: align-content: end

Aligns grid to the bottom of container.
1
2
3
4
5
6
align-content: end; /* Grid aligns to bottom */

✦ Value 4: align-content: space-between

Distributes grid rows with equal space between them.
1
2
3
4
5
6
align-content: space-between; /* Equal space between rows */

✦ Value 5: align-content: space-around

Distributes rows with equal space around them.
1
2
3
4
5
6
align-content: space-around; /* Equal space around rows */

✦ Value 6: align-content: space-evenly

Perfect equal space everywhere including edges vertically.
1
2
3
4
5
6
align-content: space-evenly; /* Perfect equal spacing vertically */

✦ Value 7: align-content: stretch (Default)

Grid rows stretch to fill available vertical space.
1
2
3
4
5
6
align-content: stretch; /* Default - rows fill available height */