Grid to make box in HTML CSS?-CodePudding

I have to get 5 boxes in the main box. 1st box has to be fully fit in the first column. 2nd, 3rd, 4th have to be in the second column. The last has to be in the third column. I tried this but get confused about how to use the grid to get my output. Please Help.

<div class="container" style="border: 1px solid; width: 500px; height: 300px; padding: 10px; margin: 0 auto; display: grid; grid-gap: 10px;">
        <div class="box1" style="border: 1px solid; text-align: center;">
            <p>Box1</p>
        </div>
        <div class="box2" style="border: 1px solid; text-align: center; width: 100px;">
            <p>Box2</p>
        </div>
        <div class="box3" style="border: 1px solid; text-align: center; width: 100px;">
            <p>Box3</p>
        </div>
        <div class="box4" style="border: 1px solid; text-align: center; width: 100px;">
            <p>Box4</p>
        </div>
        <div class="box5" style="border: 1px solid; text-align: center;">
            <p>Box5</p>
        </div>
    </div>

CodePudding user response：

Try this:

div.box1 {
  grid-column: 1;
  grid-row: 1 / span 3;
}

div.box2 {
  grid-column: 2;
  grid-row: 1;
}

div.box2 {
  grid-column: 2;
  grid-row: 2;
}

div.box2 {
  grid-column: 2;
  grid-row: 3;
}

div.box5 {
  grid-column: 3;
  grid-row: 1 / span 3;
}

Assuming you have correct grid box styles for your .container div.

CodePudding user response：

I've done basically the same as Caliph, just in your own code.

<div class="container" style="border: 1px solid; width: 500px; height: 300px; padding: 10px; margin: 0 auto; display: grid; grid-gap: 10px; grid-template-columns: 160px 160px 160px; grid-template-rows: auto auto auto">
    <div class="box1" style="border: 1px solid; text-align: center; grid-row: 1; grid-column: 1/span 3;">
        <p>Box1</p>
    </div>
    <div class="box2" style="border: 1px solid; text-align: center; grid-row: 2; grod-column: 1;">
        <p>Box2</p>
    </div>
    <div class="box3" style="border: 1px solid; text-align: center; grid-row: 2; grod-column: 2;">
        <p>Box3</p>
    </div>
    <div class="box4" style="border: 1px solid; text-align: center; grid-row: 2; grod-column: 3;">
        <p>Box4</p>
    </div>
    <div class="box5" style="border: 1px solid; text-align: center; grid-row: 3; grid-column: 1/span 3;">
        <p>Box5</p>
    </div>
</div>

CodePudding user response：

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
.container{
width: 500px;
height: 300px;
margin: auto;
border: 1px solid blue;
display: flex;
flex-direction: row;
justify-content: space-around;
text-align: center;
gap: 10px;


}

.box-1,.box-5{
    flex-grow: 2;
    display: flex;
    flex-direction: column;
    border: 1px solid red;
    padding-top: 10px;
    
}
.blok-1{
    flex-grow: 6;
    display: flex;
    flex-direction: column;
    border: 1px solid blue;
    justify-content: space-around;
}

<!DOCTYPE html>
<html lang="en">
<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">
    <link rel="stylesheet" href="style.css">
    <title>question 1</title>
</head>
<body>
<div class="container">
    <div class="box-1">Box 1</div>
    <div class="blok-1">
        <div class="box-2">Box 2</div>
        <div class="box-3">Box 3</div>
        <div class="box-4">Box 4</div>
    </div>

    <div class="box-5">Box 5</div>
</div>
</body>
</html>