1

Dr. Navneet Kaur, Lovely

Professional University

CSE326
Internet Programming Laboratory
Lecture #10
Dr. Navneet Kaur
 2
Dr. Navneet Kaur, Lovely
Professional University

Outline
 Introduction to CSS grid
 Grid container
 Grid item
 Properties for grid in CSS
 3
Dr. Navneet Kaur, Lovely
Professional University

Introduction to CSS grid

 The CSS grid layout helps designers organize a webpage.
 It's really good at dividing the page into different sections and
deciding how things like pictures and text should be placed
and sized on the page.
 It is a system with rows and columns, making it easier to
design web pages
 4
Dr. Navneet Kaur, Lovely
Professional University

Introduction to CSS grid

 5
Dr. Navneet Kaur, Lovely
Professional University

Grid container
 Grid containers consist of grid items, placed inside columns
and rows.
 An HTML element becomes a grid container when
its display property is set to grid or inline-grid.

<div class="grid-container">
....
</div>

display: grid or display: inline-grid

 6
Dr. Navneet Kaur, Lovely
Professional University

Grid item
 Grid items are the child elements in a grid container.
 By default, a container has one grid item for each grid cell.
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
 7
Dr. Navneet Kaur, Lovely
Professional University

Properties for grid in CSS

 display - Declaring display: grid gives you a one column
grid, so your items will continue to display one below the
other.
 grid-template-columns - This property specifies the number
(and the widths) of columns in a grid layout.
 grid-template-rows - This property specifies the number
(and the heights) of the rows in a grid layout.
 grid-template - This is a shorthand property for grid-
template-rows and grid-template-columns.
 8
Dr. Navneet Kaur, Lovely
Professional University

Properties for grid in CSS

 grid-row-start - This property defines on which row-line the
item will start.
 grid-row-end - This property defines how many rows an item
will span, or on which row-line the item will end.
 grid-row-gap - This property defines the size of the gap
between the rows in a grid layout.
 grid-row - This is a shorthand property for grid-row-start and
grid-row-end.
 9
Dr. Navneet Kaur, Lovely
Professional University

Properties for grid in CSS

 grid-column-start - This property defines on which column-
line the item will start.
 grid-column-end - This property defines how many columns
an item will span, or on which column-line the item will end
 grid-column-gap - This property defines the size of the gap
between the columns in a grid layout.
 grid-column - This is a shorthand property for grid-column-
start and grid-column-end.
 grid-gap – This property defines the size of the gap between
the rows and columns in a grid layout. It is also a shorthand
property for grid-row-gap and grid-column-gap
 10
Dr. Navneet Kaur, Lovely
Professional University

Properties for grid in CSS

 grid-area - This property specifies a grid item's size and
location in a grid layout. It is also a shorthand property for
grid-row-start, grid-column-start, grid-row-end and grid-
column-end.
 grid-auto-columns - This property sets a size for the
columns in a grid container.
 grid-auto-rows - This property sets a size for the rows in a
grid container.
 grid-auto-flow - This property controls how auto-placed
items get inserted in the grid.
 11
Dr. Navneet Kaur, Lovely
Professional University

Properties for grid in CSS

 grid-template-areas - This property specifies areas within
the grid layout.
 grid - This is a shorthand property for grid-template-rows,
grid-template-columns, grid-template-areas, grid-auto-rows,
grid-auto-columns, grid-auto-flow.
 12
Dr. Navneet Kaur, Lovely
Professional University

References
 https://www.w3schools.com/cssref/pr_grid.php
 https://www.w3schools.com/cssref/pr_grid-area.php
 https://www.w3schools.com/cssref/pr_grid-auto-columns.php
 https://www.w3schools.com/cssref/pr_grid-auto-flow.php
 https://www.w3schools.com/cssref/pr_grid-column.php
 https://www.w3schools.com/cssref/pr_grid-column-end.php
 https://www.w3schools.com/cssref/pr_grid-column-gap.php
 https://www.w3schools.com/cssref/pr_grid-column-start.php
 https://www.w3schools.com/cssref/pr_grid-gap.php
 https://www.w3schools.com/cssref/pr_grid-row.php
 13
Dr. Navneet Kaur, Lovely
Professional University

References
 https://www.w3schools.com/cssref/pr_grid-row-end.php
 https://www.w3schools.com/cssref/pr_grid-row-gap.php
 https://www.w3schools.com/cssref/pr_grid-row-start.php
 https://www.w3schools.com/cssref/pr_grid-template.php
 https://www.w3schools.com/cssref/pr_grid-template-
areas.php
 https://www.w3schools.com/cssref/pr_grid-template-
columns.php
 14
Dr. Navneet Kaur, Lovely
Professional University

Program link
 https://onlinegdb.com/sHTJe1AO4
 https://onlinegdb.com/57u2WL8hHj
 15
Dr. Navneet Kaur, Lovely
Professional University

Thank you