Scribd
Upload
1 views1 page

Grid

CSS Grid is a layout system that simplifies the creation of responsive web designs using rows and columns without floats or positioning. It involves a grid container that holds grid items, with properties to define gaps, rows, and columns. Key properties include display, grid-template-rows, grid-template-columns, and gap adjustments for spacing between items.

Uploaded by

Neha Paunikar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
1 views1 page

Grid

CSS Grid is a layout system that simplifies the creation of responsive web designs using rows and columns without floats or positioning. It involves a grid container that holds grid items, with properties to define gaps, rows, and columns. Key properties include display, grid-template-rows, grid-template-columns, and gap adjustments for spacing between items.

Uploaded by

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

Grid in CSS

Grid:- It makes it easier to design a responsive layout structure, without using


float or positioning. It offers a grid-based layout system, with rows and
columns. It allows developers to easily create complex web layouts.

A grid layout consists of a parent element (the grid container), with one or more
child elements.

All direct children of the grid container automatically become grid items.

Display Grid Property:-

An HTML element becomes a grid container when its display property is set
to grid or inline-grid

Grid Rows:- The horizontal lines of grid items are called rows.
Grid Columns:- The vertical lines of grid items are called columns.
Grid gaps:- The spaces between each column/row are called gaps.

You can adjust the gap size by using one of the following properties:

 column-gap
 row-gap
 gap

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.
grid-template-rows:- It decides number of rows and their size.
grid-template-columns:- It decides number of columns and their size.
grid-column-start and grid-column-end:- These properties are used merge 2
or more columns.
grid-row-start and grid-row-end:- These properties are used merge 2 or more
rows.

You might also like