Scribd
Upload
26 views14 pages

Lecture 8

Uploaded by

javohirsadullayev2024
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
26 views14 pages

Lecture 8

Uploaded by

javohirsadullayev2024
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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