Scribd
Upload
14 views

03 - Grid in CSS

The CSS Grid layout allows you to divide a web page into rows and columns to create complex and flexible page layouts. It creates a grid container for the parent element and places child elements into the rows and columns. The grid-template-columns and grid-template-rows properties are used to define the columns and rows by specifying their size, shape, and number using values like pixels and fractions.

Uploaded by

chandramoulibogala43
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
14 views

03 - Grid in CSS

The CSS Grid layout allows you to divide a web page into rows and columns to create complex and flexible page layouts. It creates a grid container for the parent element and places child elements into the rows and columns. The grid-template-columns and grid-template-rows properties are used to define the columns and rows by specifying their size, shape, and number using values like pixels and fractions.

Uploaded by

chandramoulibogala43
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

GRID in CSS

In CSS, a grid is a layout system that allows you to create complex and flexible layouts for your
web pages. It works by dividing a web page into a grid of rows and columns, and then placing
content within those rows and columns.

The CSS Grid layout provides two-dimensional layout control, where you can place items in
rows and columns. It allows you to create a grid container, which is the parent element that
holds the grid items (child elements).

To Create Grid Container use the Following Property


display : grid

The grid-template-columns property in CSS Grid layout is used to define the columns of a
grid. It specifies the size, shape, and number of columns in a grid container.

The grid-template-columns property can take one or more values, which specify the size of each
column. You can use various units like pixels, percentages, em, rem, auto, and fractional units
(like fr) to define the size of the columns. Here's an example that creates a grid with three
columns of equal width:

In this example, the grid-template-columns property has three values, each with a value of 1fr.
The fr unit is a fractional unit that divides the available space among the columns. In this case,
the available space is divided into three equal parts.
In this example, the first column is set to a fixed width of 200px, while the second and third
columns are set to take up one-third and two-thirds of the remaining space, respectively.

In addition to setting the size of columns, you can also use the grid-template-columns property
to define the number and position of grid lines, which can be used to position grid items within
the grid.

The grid-template-rows property in CSS Grid layout is used to define the rows of a grid. It
specifies the size, shape, and number of rows in a grid container.

The grid-template-rows property can take one or more values, which specify the size of each
row. You can use various units like pixels, percentages, em, rem, auto, and fractional units (like
fr) to define the size of the rows. Here's an example that creates a grid with three rows of equal
height:

In this example, the grid-template-rows property has three values, each with a value of 1fr. Like
with grid-template-columns, the fr unit is a fractional unit that divides the available space among
the rows. In this case, the available space is divided into three equal parts.
You can also use other units and values in combination with the fr unit to create more complex
layouts. For example:

In this example, the first row is set to a fixed height of 200px, while the second and third rows
are set to take up one-third and two-thirds of the remaining space, respectively.

In addition to setting the size of rows, you can also use the grid-template-rows property to define
the number and position of grid lines, which can be used to position grid items within the grid.

You might also like