CSS Grid

<div class="container">
<div class="item"> </div>
<div class="item">
<p class="sub-item"> </p>
</div>
<div class="item"> </div>
</div>
<html>
<head>
<style>
.main {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 250px 200px;
background-color: black;
grid-gap: 10px;
padding: 20px;
}
.num {
background-color: lightgrey;
text-align: center;
padding: 20px 15px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="main">
<div class="num">One</div>
<div class="num">Two</div>
<div class="num">Three</div>
<div class="num">Four</div>
<div class="num">Five</div>
<div class="num">Six</div>
<div class="num">Seven</div>
<div class="num">Eight</div>
<div class="num">Nine</div>
</div>
</body>
</html>
<html>
<head>
<style>
.grid-container1 {
display: grid;
justify-content: space-evenly;
grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container2 {
display: grid;
justify-content: space-around;
grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
grid-gap: 10px;
background-color: red;
padding: 10px;
}
.grid-container3 {
display: grid;
justify-content: space-between;
grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
grid-gap: 10px;
background-color: green;
padding: 10px;
}
.grid-container4 {
display: grid;
justify-content: end;
grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
grid-gap: 10px;
background-color: violet;
padding: 10px;
}
.grid-container5 {
display: grid;
justify-content: start;
grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
grid-gap: 10px;
background-color: gray;
padding: 10px;
}
.grid-container6 {
display: grid;
justify-content: center;
grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
grid-gap: 10px;
background-color: blue;
padding: 10px;
}
.num {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<b>CONTAINER WITH SPACE-EVENLY VALUE</b>
<div class="grid-container1">
<div class='num'>1</div>
<div class='num'>2</div>
<div class='num'>3</div>
</div>
<b>CONTAINER WITH SPACE-AROUND VALUE</b>
<div class="grid-container2">
<div class='num'>1</div>
<div class='num'>2</div>
<div class='num'>3</div>
</div>
<b>CONTAINER WITH SPACE-BETWEEN VALUE</b>
<div class="grid-container3">
<div class='num'>1</div>
<div class='num'>2</div>
<div class='num'>3</div>
</div>
<b>CONTAINER WITH END VALUE</b>
<div class="grid-container4">
<div class='num'>1</div>
<div class='num'>2</div>
<div class='num'>3</div>
</div>
<b>CONTAINER WITH START VALUE</b>
<div class="grid-container5">
<div class='num'>1</div>
<div class='num'>2</div>
<div class='num'>3</div>
</div>
<b>CONTAINER WITH CENTER VALUE</b>
<div class="grid-container6">
<div class='num'>1</div>
<div class='num'>2</div>
<div class='num'>3</div>
</div>
</body>
</html>
<html>
<head>
<style>
#main {
width: 70px;
height: 300px;
border: 1px solid #c3c3c3;
display: flex;
flex-wrap: wrap;
align-content: center;
}

#main div {
width: 70px;
height: 70px;
}
</style>
</head>
<body>
<h1>The align-content Property</h1>
<div id="main">
<div style="background-color:coral;"></div>
<div style="background-color:lightblue;"></div>
<div style="background-color:pink;"></div>
</div>
<p><b>Note:</b> Internet Explorer 10 and earlier versions do not support the align-content property.</p>
</body>
</html>

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store