Code:
In this CSS tutorial we are going to learn about the most used properties of CSS Grid Layout
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="style.css
"
/>
<title>Document</title>
</head>
<body>
<h1>CSS Grid Crash Course</h1>
<div class="main-container">
<div class="grid-element"></div>
<div class="grid-element"></div>
<div class="grid-element"></div>
<div class="grid-element"></div>
<div class="grid-element"></div>
<div class="grid-element"></div>
<div class="grid-element"></div>
<div class="grid-element"></div>
<div class="grid-element"></div>
</div>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
body {
font-family: sans-serif;
max-width: 900px;
margin: auto;
}
h1 {
text-align: center;
font-weight: bolder;
font-size: 4rem;
margin: 2rem 0;
padding: 1rem;
background-color: rgb(0, 74, 158);
color: #fff;
}
.main-container {
background-color: #2466d4;
box-shadow: 0 0 10px 2px;
height: 600px;
}
.grid-element {
border-radius: 10px;
border: 1px solid;
}
.grid-element:nth-child(odd) {
background-color: red;
}
.grid-element:nth-child(even) {
background-color: white;
}
.main-container {
display: grid;
grid-template-columns: 80px 150px auto;
/* grid-template-rows: 25% 100px auto; */
grid-template-rows: 300px auto;
grid-template-columns: 300px 300px 300px;
grid-template-columns: repeat(3, 1fr);
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: repeat(3, 1fr);
/* column-gap: 10px; */
/* row-gap: 20px; */
gap: 20px 10px;
gap: 20px;
}
/* Justify Items */
.grid-element {
width: 100px;
}
.main-container {
/* justify-items: start;
justify-items: end;
justify-items: center; */
}
/* Align Items */
.grid-element {
/* width: 100px; */
width: auto;
/* height: 100px; */
}
.main-container {
align-items: start;
align-items: end;
align-items: center;
align-items: stretch;
}
/* Justify Content */
.grid-element {
height: 100px;
}
.main-container {
grid-template-columns: repeat(3, 200px);
grid-template-rows: repeat(3, 200px);
gap: 0;
justify-content: start;
justify-content: end;
justify-content: center;
justify-content: space-around;
justify-content: space-between;
justify-content: space-evenly;
}
/* Align Content */
.main-container {
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 150px);
align-content: end;
align-content: start;
align-content: center;
align-content: space-around;
align-content: space-between;
align-content: space-evenly;
}