WEB DESIGNING AND DEVELOPMEENT.pptx

WEB DESIGNING AND
DEVELOPMENT
BY:NAMAN GUPTA
BBACAM-5
35221001918
DATE:22-09-2020
TOPIC:CSS GRID LAYOUT MODULE

CONTENTS
 CSS(CASCADING STYLESHEETS)
 CSS GRID LAYOUT MODULE
 GRID ELEMENTS
 DISPLAY PROPERTY OF CSS GRID
 GRID ROWS AND COLUMNS
 GRID GAPS
 GRID LINES
 GRID CONTAINER

CASCADING STYLE SHEETS
(CSS)
 CSS stands for Cascading Style Sheets.
 CSS describes how HTML elements are to
be displayed on screen, paper, or in other
media.
 CSS saves a lot of work. It can control the
layout of multiple web pages all at once.
 CSS is a simple design language intended
to simplify the process of making web
pages presentable.

CSS GRID LAYOUT MODULE
The CSS Grid Layout Module offers a grid-based
layout system, with rows and columns, making it
easier to design web pages without having to use
floats and positioning.

CODING OF CSS GRID LAYOUT
<html>
<head>
<style>
.container {
display: grid;
grid: 100px / auto auto;
grid-gap: 5px;
background-color: BLACK;
padding: 10px;
}
.container div {
background-color: WHITE;
text-align: center;
padding:10px 0;
font-size: 20px;
} </style>
</head>
<body>
<div class = "container">
<div class = "GRID-ITEMS1">1</div>
<div class = "GRID-ITEM2">2</div>
</div>
</body>
</html>

GRID ELEMENTS
 A grid layout consists of a parent element, with one or more child
elements.
 You work with Grid Layout by applying CSS rules both to a parent
element (which becomes the Grid Container) and to that element’s
children (which become Grid Items)
<div class = "container">
<div class = "GRID-ITEMS1">1</div>
</div>

Display Property in GRID
DISPLAY PROPERTY
Grid
.grid-container {
display: grid;}
Inline-grid
.grid-container {
display: inline-grid;}
.
An HTML element becomes a grid container when its display property
is set to grid or inline-grid.

<html> <head>
<style>
.container {
display:inline-grid;
grid: 100px / auto auto;
grid-gap: 10px;
background-color: black;
padding: 10px }
.container div {
background-color: white;
text-align: center; padding:10px 0;
font-size: 20px; }
</style></head> <body>
<div class = "container"> <div class =
"GRIDITEMS1">1</div>
</div>
</body>
</html>
CODING AND OUTPUT OF INLINE GRID

GRID ROWS AND COLUMNS
The vertical lines of grid items are
called Grid columns.
The horizontal lines of grid items are
called Grid rows.

GRID GAPS
The spaces between each column/row are called gaps
I can adjust the gap size by using one of the following properties:
1.grid-column-gap
2.grid-row-gap
3.grid-gaps
.grid-container {
display: grid;
grid-row/column-gap: 30px;
grid-gaps: 50px,100px; }

GRID LINES
The lines between columns are called column lines. The lines between
rows are called row lines.
.GRID-ITEMS1{
GRID-COLUMN-START:1;
GRID-COLUMN-END:3;
}

GRID CONTAINER
Grid containers consist of grid items, placed inside
columns and rows.
Grid-Template-Columns/Rows Property
This defines the number of rows/columns in the grid as well as
their dimension.
The grid-template-columns property defines to specify the
size (width) of the columns.
The grid-template-rows property defines the height of each
row.

REFERENCES
 WWW.W3SCHOOLS.COM
 https://www.geeksforgeeks.org/css-
tutorials/.
 https://www.tutorialspoint.com/css
/index.htm

WEB DESIGNING AND DEVELOPMEENT.pptx

WEB DESIGNING AND DEVELOPMEENT.pptx

Recommended

Recommended

More Related Content

Similar to WEB DESIGNING AND DEVELOPMEENT.pptx

Similar to WEB DESIGNING AND DEVELOPMEENT.pptx (20)

Recently uploaded

Recently uploaded (20)

WEB DESIGNING AND DEVELOPMEENT.pptx