07-26-2023, 07:03 PM
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.
<!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.
Also follow me on Youtube for videos about video games:
https://www.youtube.com/channel/UCxfkGVU...2mQ/videos
https://www.youtube.com/channel/UCxfkGVU...2mQ/videos