Styling DIV's using CSS techniques - html

Question

I am trying to create a table that looks like this
<div class="style" id="1"></div>
<div class="style" id="2"></div>
<div class="style" id="3"></div>
<div class="style" id="4"></div>
<div class="style" id="5"></div>
<div class="style" id="6"></div>
<div class="style" id="7"></div>
<div class="style" id="8"></div>
<div class="style" id="9"></div>
I am struggling with the css part

Answer 1

For positioning items like show in your image, you can use display: grid;. I made the grid to have 4 columns and 3 rows.
Lastly, one item is bigger than the others. You can change the space the item uses by adjusting the grid-column and grid-row:
* {
margin: 0;
padding: 0;
}
body {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3,1fr);
max-width: 400px;
}
div {
min-width: 100px;
min-height: 100px;
border: 1.5px solid black;
}
#one {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
#one,
#three,
#four,
#six,
#eight {
background-color: red;
}
#two,
#five,
#seven,
#nine {
background-color: blue;
}
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
<div id="six"></div>
<div id="seven"></div>
<div id="eight"></div>
<div id="nine"></div>

Answer 2

Not using the html you gave but this is a approach with display: flex . I did not optimize the styling so you can see what is happening.
* {
box-sizing: border-box;
}
.row-full {
display: flex;
flex-wrap: wrap;
width: 240px;
}
.row-half {
display: flex;
flex-wrap: wrap;
width: 120px;
}
.block-big {
width: 120px;
height: 120px;
border: 1px solid black;
}
.block {
width: 60px;
height: 60px;
border: 1px solid black;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
<div class="row-full">
<div class="block-big red"></div>
<div class="row-half">
<div class="block blue"></div>
<div class="block red"></div>
<div class="block red"></div>
<div class="block blue"></div>
</div>
</div>
<div class="row-full">
<div class="block red"></div>
<div class="block blue"></div>
<div class="block red"></div>
<div class="block blue"></div>
</div>

Answer 3

I would use css grid for this. css grid makes it able for you to make a more complex css layout. I made this quick example that shows how you can use it.
.grid{
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr);
width: 100vw;
height: 100vh;
background-color: red;
}
.style1{
grid-column: 1/3;
grid-row: 1/3;
background-color: blue;
}
.style2{
grid-column: 3/4;
grid-row: 1/2;
background-color: green;
}
.style3{
grid-column: 3/4;
grid-row: 2/3;
background-color: yellow;
}
.style4{
grid-column: 4/5;
grid-row: 1/3;
background-color: pink;
}
.style5{
grid-column: 1/4;
grid-row: 3/4;
background-color: orange;
}
.style6{
grid-column: 4/5;
grid-row: 3/4;
background-color: purple;
}
<div class="grid">
<div class="style1" id="1"></div>
<div class="style2" id="2"></div>
<div class="style3" id="3"></div>
<div class="style4" id="4"></div>
<div class="style5" id="5"></div>
<div class="style6" id="6"></div>
</div>

Answer 4

This is another answer :
html, body{
font-family: sans-serif;
}
#container{
display:grid;
grid-template-columns: repeat(4, 100px);
grid-template-rows: repeat(4, 100px);
}
#container div{
border:1px solid #000000;
}
#div1{
background-color: red;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
}
#div2{
background-color: blue;
}
#div3{
background-color: red;
}
#div4{
background-color: red;
}
#div5{
background-color: blue;
}
#div6{
background-color: red;
}
#div7{
background-color: blue;
}
#div8{
background-color: red;
}
#div9{
background-color: blue;
}
<div id="container">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></div>
<div id="div7"></div>
<div id="div8"></div>
<div id="div9"></div>