Scribd
Upload
47 views15 pages

CSE326 Lec10

This document discusses CSS grid layout and its properties. It begins with an introduction to CSS grid and how it helps organize web pages using rows and columns. It then defines grid containers and grid items, with containers becoming grids when the display property is set to grid or inline-grid. Several properties for controlling grid layout are described, including grid-template-columns for column widths, grid-template-rows for row heights, and grid-template for a shorthand. References for further reading are provided.

Uploaded by

rahu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
47 views15 pages

CSE326 Lec10

This document discusses CSS grid layout and its properties. It begins with an introduction to CSS grid and how it helps organize web pages using rows and columns. It then defines grid containers and grid items, with containers becoming grids when the display property is set to grid or inline-grid. Several properties for controlling grid layout are described, including grid-template-columns for column widths, grid-template-rows for row heights, and grid-template for a shorthand. References for further reading are provided.

Uploaded by

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

1

Dr. Navneet Kaur, Lovely Profession


al 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 Profession
al University

Thank you

You might also like