Day - 15 ( Grid )

GRID

1. Grid layout module

• grid layout module offers a grid- base layout system,with rows and columns -Grid layout Modules allows developers to easily create complex web layouts

• the Grid layout Modules make it easy to design a responsive layout structure,without using float or positioning

• Grid is used for two-dimensional layout, with rows AND columns.

• A grid container - the parent elemnt ,where the display.property is set to gird or inline grid (is like inline element)

2.Grid trcks(rows and columns)

• grid-template-columns- Defines the number and width of the columns in the grid
  Comman values are :

• Fixed lengths (100px 300px 200px)

• Percentages (20% 60% 20%)

• fr unit (1fr 2fr 1fr)

• auto (auto auto auto)

• repeat() (repeat(3, 1fr))

• minmax() (minmax(80px, 1fr) 150px 150px)

• grid-template-rows-Defines the number and height of the rows in the grid

• grid-template-areas-Defines how to display columns and rows, using named grid items

*TASK *

Source code
https://gitlab.com/akilan46-group/Akilan46-project/-/blob/main/grid.html?ref_type=heads

output

akilan46-project-bce2db.gitlab.io