CSS Grid
CSS Grid is an advanced layout mechanism that enables developers to create two-dimensional layouts in terms of rows and columns.
Example:
HTML
<!DOCTYPE
html>
<html>
<head>
<title>
CSS Grid
</title>
</head>
<body>
<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
class="grid-item">
7
</div>
<div
class="grid-item">
8
</div>
<div
class="grid-item">
9
</div>
</div>
</body>
</html>
CSS
.grid-container
{
display: grid;
grid-template-columns: auto auto auto;
background-color: #234edd;
}
.grid-item
{
color: white;
padding: 20px;
border: 1px solid black;
font-size: 30px;
text-align: center;
}
Output
