Scribd
Upload
49 views6 pages

Parallax & CSS Grids

CSS Grids allow developers to lay out content in rows and columns, providing greater consistency across web pages. A grid has columns, rows, and gutters between each, and content can be placed on the grid using line-based positioning properties like grid-column-start and grid-column-end. CSS Grid is a two-dimensional layout system that makes building complex page designs straightforward.

Uploaded by

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

Parallax & CSS Grids

CSS Grids allow developers to lay out content in rows and columns, providing greater consistency across web pages. A grid has columns, rows, and gutters between each, and content can be placed on the grid using line-based positioning properties like grid-column-start and grid-column-end. CSS Grid is a two-dimensional layout system that makes building complex page designs straightforward.

Uploaded by

rookhum
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

Parallax & CSS Grids

Instructor: Love Babbar


What is CSS Grid ?
A grid is a collection of horizontal and vertical lines creating a pattern against which we can line up our design elements. They help us to create
layouts in which our elements won't jump around or change width as we move from page to page, providing greater consistency on our websites.

• CSS Grid Layout is a two-dimensional layout system for the web.


• It lets you lay content out in rows and columns.
• It has many features that make building complex layouts straightforward.
• A grid will typically have columns, rows, and then gaps between each row and column. The gaps are
commonly referred to as gutters.
Rows, Columns & Gaps
Flexible Grids
Line based Placement:
We now move on from creating a grid to placing things on the grid. Our grid always has lines — these are numbered beginning with 1 and relate to the writing mode
of the document. For example, column line 1 in English (written left-to-right) would be on the left-hand side of the grid and row line 1 at the top, while in Arabic

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end
• Shorthand properties: grid-row, grid-column, grid area
Some more Properties

You might also like