EN
HTML - create grid using flexbox
3
points
In this article, we would like to show you how to create a grid using flexbox using JavaScript.
Practical example
In this example, we create a grid from div elements using CSS display: grid property.
// ONLINE-RUNNER:browser;
<!DOCTYPE html>
<html>
<head>
<style>
.grid {
display: flex; /* <--- required */
}
.column {
flex: 1; /* <--- required */
}
.row {
margin: 2px;
background: gold;
text-align: center;
}
</style>
</head>
<body>
<div class="grid">
<div class="column">
<div class="row">1.1</div>
<div class="row">1.2</div>
<div class="row">1.3</div>
</div>
<div class="column">
<div class="row">2.1</div>
<div class="row">2.2</div>
<div class="row">3.3</div>
</div>
<div class="column">
<div class="row">3.1</div>
<div class="row">3.2</div>
<div class="row">3.3</div>
</div>
</div>
</body>
</html>