Scribd
Upload
2 views3 pages

CSS Grid and Box Model Explained

The document provides an overview of CSS, specifically focusing on the concepts of margin and padding, as well as CSS Grid layout. It includes a sample HTML structure demonstrating a grid with six child div elements, their styling, and the use of grid properties such as grid-template-columns and grid-template-rows. Additionally, it explains the purpose of gaps between child elements and the use of grid areas for layout manipulation.

Uploaded by

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

CSS Grid and Box Model Explained

The document provides an overview of CSS, specifically focusing on the concepts of margin and padding, as well as CSS Grid layout. It includes a sample HTML structure demonstrating a grid with six child div elements, their styling, and the use of grid properties such as grid-template-columns and grid-template-rows. Additionally, it explains the purpose of gaps between child elements and the use of grid areas for layout manipulation.

Uploaded by

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

CSS Notes:

CSS : Cascading Style Sheets

margin:space outside the border

padding : space inside the border

See the below to understand the difference between the padding and the margin.

CSS Grid Notes


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>CSS Grid </title>
</head>
<style>
.box{
background-color: green;
display: grid;
/* here 100px 100px and 30px are three columns */
/* grid-template-columns: 100px 100px 30px ; */
grid-template-columns: repeat(3,10fr) ;
/* here 100px 100px are two rows */
/* grid-template-rows: 100px 100px 100px; */
grid-template-rows: repeat(2,100px) ;
/* 10px is vertical gap and 20px is horizontal gap between the
child elements */
/* gap is not applicable between the border and child . It is
only applicable between the any two child
elements */
gap: 10px 20px;
/* to use grid-template area we first we should use the grid
area in the children
grid area is just a nickname to the child to manipulate them */
/* dont use the grid area with out using the grid-area-template
in the parent */
/* here we wrote two lines code in grid-template-area */
/* those two lines indicate two rows and three columns */
/* we use the nicknames of the children to use them as we wish
*/
/* grid-template-areas:
"gree blu re"
"yello purpl orang"; */

}
.box>div{
padding: 20px;
border: 1px solid green;
display: grid;
justify-content: center;
align-items: center;
}
.box>div:nth-child(1){
background: blue;
/* grid-area: blu; */

}
.box>div:nth-child(2){
background: rgb(217, 255, 0);
/* grid-area: yello; */
}
.box>div:nth-child(3){
background: rgb(255, 0, 43);
/* grid-area: re; */
}
.box>div:nth-child(4){
background: rgb(0, 255, 55);
/* grid-area: gree; */
}
.box>div:nth-child(5){
background: rgb(0, 208, 255);
/* grid-area: purpl; */
}
.box>div:nth-child(6){
background: rgb(221, 255, 0);
/* grid-area: orang; */
}
</style>
<body>
<!-- here box is the parent and inside the box there are six div
elements those are children -->
<div class="box">
<div>1</div><!--this is child one-->
<div>2</div><!--this is child two-->
<div>3</div><!--this is child three-->
<div>4</div><!--this is child four-->
<div>5</div><!--this is child five-->
<div>6</div><!--this is child six-->
</div>
</body>
</html>

You might also like