+- QP School (https://qomplainerzschool.lima-city.de)
+-- Forum: Tutorials (https://qomplainerzschool.lima-city.de/forumdisplay.php?fid=3)
+--- Forum: CSS3 Tutorials (https://qomplainerzschool.lima-city.de/forumdisplay.php?fid=5)
+--- Thread: How to make a grid layout with CSS3 (/showthread.php?tid=5169)
How to make a grid layout with CSS3 - Qomplainerz - 07-26-2023
Example:
<!DOCTYPE html>
<html>
<head>
<title>Grid Layout Example</title>
<style>
/* Apply grid layout to the container element */
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-gap: 10px;
}
/* Apply grid items */
.item {
width: 100px;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
Explanation:
CSS Grid Layout is used for creating complex grid-based designs. In this example, the container class is a grid container with the property display: grid. The grid-template-columns property sets the columns to repeat three times with a width of 100 pixels each, and grid-gap adds a 10-pixel gap between grid items. The item class represents the grid items with a width and height of 100 pixels and a light blue background color.