Scribd
Upload
5 views8 pages

Introduction to CSS Grid

CSS Grid is a two-dimensional layout system that allows for the creation of complex web layouts using rows and columns. It consists of a grid container and grid items, with properties for defining columns and rows, spacing, and alignment. Key properties include gap, justify-content, align-content, and methods for placing items within the grid.

Uploaded by

sushminkv2619
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
5 views8 pages

Introduction to CSS Grid

CSS Grid is a two-dimensional layout system that allows for the creation of complex web layouts using rows and columns. It consists of a grid container and grid items, with properties for defining columns and rows, spacing, and alignment. Key properties include gap, justify-content, align-content, and methods for placing items within the grid.

Uploaded by

sushminkv2619
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/ 8

Introduction to CSS Grid

What is CSS Grid?


CSS Grid is a two-dimensional layout system for the web.
It allows you to build layouts using rows and columns, making
it perfect for page design and complex UI structures.

Why Use Grid?


Align items in both rows and columns
•Create precise spacing and alignment
•Avoid nested containers and extra divs
CSS Grid Components
A grid always consists of:
• Grid Container - the parent (container) <div> element
• Grid Items - the items inside the container <div>

Creating a Grid Container


display: grid;
to turn an element into a grid container.
Example:
.container
{
display:grid;
}
Defining Columns and Rows
Define the number and size of columns and rows:

grid-template-columns: 200px 1fr 1fr;


grid-template-rows: 100px auto;

•px, fr, auto, % are valid units.


•fr means "fraction of available space."
The Gap Property
Add spacing between rows and columns

The gap property can have one of the following values:


•column-gap
•row-gap
•gap
The justify-content Property
The justify-content property is used to align the grid items when
they do not use all available space on the main-axis (horizontally).

The justify-content property can have one of the following values:


•space-evenly
•space-around
•space-between
•center
•start
•end
The align-content Property
The align-content property is used to align the grid items when
they do not use all available space on the cross-axis (vertically).

The align-content property can have one of the following


values:
•space-evenly
•space-around
•space-between
•center
•start
•end
The place-content Property
The place-content property is a shorthand property for
the align-content and the justify-content properties.

If the place-content property has two values:


•place-content: start center; - the align-content value is
'start' and justify-content value is 'center'
Placing Items on the Grid
The grid-column-start and grid-column-end Properties

• The grid-column-start property specifies where to start a grid item.


• The grid-column-end property specifies where to end a grid item.
• The grid-row-start property specifies where to start a grid item.
• The grid-row-end property specifies where to end a grid item.

You might also like