Styling DIV's using CSS techniques-CodePudding

I am trying to create a table that looks like this

<div  id="1"></div>
<div  id="2"></div>
<div  id="3"></div>
<div  id="4"></div>
<div  id="5"></div>
<div  id="6"></div>
<div  id="7"></div>
<div  id="8"></div>
<div  id="9"></div>

I am struggling with the css part

CodePudding user response：

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>

CodePudding user response：

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 >
    <div ></div>
    <div >
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
    </div>
</div>

<div >
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
</div>

CodePudding user response：

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 >

  
        <div  id="1"></div>
        <div  id="2"></div>
        <div  id="3"></div>
        <div  id="4"></div>
        <div  id="5"></div>
        <div  id="6"></div>
 </div>

CodePudding user response：

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>