Scribd
Upload
114 views

CSS - Grid

Grid layout offers a grid-based layout system using rows and columns to position content, making it easier than floats. A grid contains grid lines that define columns and rows, grid cells at their intersections, and grid areas that can span multiple cells. Grid tracks are the rows and columns that can be sized automatically or manually, with gaps between. The document defines grid terminology and how to specify a grid container and grid items to place content within the defined layout.

Uploaded by

SHAIK IRFAN
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
114 views

CSS - Grid

Grid layout offers a grid-based layout system using rows and columns to position content, making it easier than floats. A grid contains grid lines that define columns and rows, grid cells at their intersections, and grid areas that can span multiple cells. Grid tracks are the rows and columns that can be sized automatically or manually, with gaps between. The document defines grid terminology and how to specify a grid container and grid items to place content within the defined layout.

Uploaded by

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

CSS -Grid

Grid Layout

 The CSS Grid Layout Module offers a grid-based layout system, with rows
and columns, making it easier to design web pages without having to use
floats and positioning.
 So what can you do with grid? Grid layouts have the following features. You'll
learn about all of them in this guide.

1. A grid can be defined with rows and columns. You can choose how to size
these row and column tracks or they can react to the size of the content.
2. Direct children of the grid container will be automatically placed onto this grid.
3. Or, you can place the items in the precise location that you want.
4. Lines and areas on the grid can be named to make placement easier.
5. Spare space in the grid container can be distributed between the tracks.
6. Grid items can be aligned within their area
GRID -Responsive
Grid Lines
 A grid is made up of lines, which run horizontally and vertically. If your grid has four
columns, it will have five column lines including the one after the last column.
Grid terminology

Grid cell
 A grid cell is the smallest space on a grid defined by the intersection of row and
column tracks. It's just like a table cell or a cell in a spreadsheet. If you define a grid
and don't place any of the items they will automatically be laid out one item into each
defined grid cell.
Grid area

 Several grid cells together. Grid areas are created by causing an item to span over
multiple tracks.
Grid-Gaps
 A gutter or alley between tracks. For sizing purposes these act like a regular track.
You can't place content into a gap but you can span grid items across it.
Grid container

 We can define the grid container by setting the display property to grid or inline-
grid on an element.
 Grid container contains grid items that are placed inside rows and columns.
Grid item

 A grid item is an item which is a direct child of the grid container


The fr unit
 We have existing length dimensions, percentages, and also these new keywords.
There is also a special sizing method which only works in grid layout. This is the
fr unit, a flexible length which describes a share of the available space in the
grid container.

 The fr unit works in a similar way to using flex: auto in flexbox. It distributes
space after the items have been laid out. Therefore to have three columns
which all get the same share of available space:

You might also like