Is it possible to achieve this layout using rows within columns with Bootstrap:
https://i.sstatic.net/DC0f4.png
I attempted the following without success:
<div className="col-lg-3 col-12">
<div className="row">
<displaySquare />
</div>
<div className="row">
<displaySquare />
</div>
<div className="row">
<displaySquare />
</div>
</div>
<div className="col-lg-9 col-12">
<div className="row">
<displayBigSquare />
</div>
<div className="row">
<displaySquare />
<displaySquare />
</div>
</div>
Thank you
UPDATE (23/08/2021): It works better with CSS grid. I decided to drop Bootstrap and use GRID instead which allows for defining grid-related properties (GRID explanations on https://developer.mozilla.org/fr/docs/Web/CSS/grid).
HTML code:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Griiiiid!</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<h1 class="centre">Welcome</h1>
<div class="container">
<div class="items item1">1</div>
<div class="items item2">2</div>
<div class="items item3">3</div>
<div class="items item4">4</div>
<div class="items item5">5</div>
<div class="items item6">6</div>
</div>
</body>
</html>
CSS code:
*,
::before,
::after {
box-sizing: border-box;
}
body {
background-color: #333;
margin: 0;
padding: 0;
font-family: Georgia, "Times New Roman", Times, serif;
}
h1 {
color: salmon;
}
.centre {
text-align: center;
}
.container {
padding: 30px ;
width: 100%;
background-color: #eee;
margin: 30px auto;
display: grid;
grid-template-rows: 150px;
grid-template-columns: repeat(3, 150px);
grid-auto-rows: 150px;
gap: 30px;
}
.items {
padding: 20px;
font-size: 30px;
font-family: sans-serif;
}
.item1 {
background-color: lightcoral;
}
.item2 {
grid-row: 1/3;
grid-column: 2/4;
background-color: lightgreen;
}
.item3 {
background-color: lime;
}
.item4 {
background-color: chocolate;
}
.item5 {
background-color: darkgoldenrod;
}
.item6 {
background-color: darkseagreen;
}
Result: https://i.sstatic.net/bnuvz.png