Scribd
Upload
19 views

Lecture 8

Uploaded by

javohirsadullayev2024
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
19 views

Lecture 8

Uploaded by

javohirsadullayev2024
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 14

CSS Grid Layout

Mirzoulugbek Yusupov
What is CSS Grid?
• CSS Grid is a two-dimensional layout system for the web.

• Grid Containers and Grid Items


• Grid Container: The parent element with display: grid or display: inline-grid.
• Grid Items: Direct children of the grid container.
Grid Columns

• The grid-template property is a shorthand


property for the following properties:
• grid-template-columns
• grid-template-rows
• grid-template-areas

• The grid-template-columns property defines


the number of columns in your grid layout, and
it can define the width of each column.

Grid template exersice!


Grid Rows

The grid-template-rows property specifies the


number (and the heights) of the rows in a grid
layout.
Grid-area
• The grid-area property specifies a grid item's size and location in a grid layout, and is a shorthand
property for the following properties:

• grid-row-start
• grid-column-start
• grid-row-end
• grid-column-end

• The grid-area property can also be used to assign a name to a grid item. Named grid items can
then be referenced to by the grid-template-areas property of the grid container. See examples
below.

Grid area exercise! - Grid template area!


Grid Lines

• The lines between columns and rows are


called column lines and row lines, respectively

1. The grid-column property specifies a grid


item's size and location in a grid layout, and is
a shorthand property is:
• grid-column-start
• grid-column-end

2. The grid-row property specifies a grid item's


size and location in a grid layout, and is a
shorthand property is:
• grid-row-start
• grid-row-end
Grid Gaps

• The spaces between each column/row


are called gaps.
•
The column-gap property specifies the
gap between the columns in a grid.

• The row-gap property specifies the gap


between the rows in a grid.

• The gap property is a shorthand


property for row-gap and column-gap:
Exersice 1
grid-auto-flow
The grid-auto-flow property in CSS controls how the auto-placed items (those not explicitly
positioned) are placed in a grid container.

grid-auto-flow: row | column | dense | row dense | column dense;

• row (default) - Items are placed row by row.


• column - Items are placed column by column.
• dense - The browser tries to fill in gaps in the grid by placing smaller items into available spaces.
• row dense - Items are placed row by row, and gaps are backfilled when possible.
• column dense - Items are placed column by column, and gaps are backfilled when possible.
justify-items & align-items

• These properties control the alignment of grid items inside their grid cells:
• justify-items: Aligns items horizontally (left, center, right).
• align-items: Aligns items vertically (top, center, bottom).

• Values
• start: Aligns items at the start.
• center: Centers items.
• end: Aligns items at the end.
• stretch (default): Stretches items to fill the grid cell.
justify-content & align-content

• These properties control the alignment of the entire grid within the container:
• justify-content: Aligns the grid horizontally.
• align-content: Aligns the grid vertically.

• Values:
• start: Aligns the grid at the start.
• center: Centers the grid.
• end: Aligns the grid at the end.
• space-between: Spreads items evenly, with no space at the edges.
• space-around: Spreads items evenly, with space around them.
• space-evenly: Spreads items evenly, with equal space between and around.
place-items & place-content

• place-items: is a shorthand for align-items and justify-items.


• place-items: start, center, stretch and end
• place-content: is a shorthand for align-content and justify-content.
• place-content: start, center, end, space-between, space-around and stretch
Homework

You might also like