The answer to the question (“How can I make responsive grid layout in html css”) is this:
.wrapper {
display: grid;
justify-content: center;
}
.box {
border: 2px solid #000;
width: 128px;
min-height: 128px;
justify-content: center;
margin: 10px;
display: grid;
align-items: center;
}
.box5 {
grid-column: 2/5;
width: 280px;
}
/*for this to be visible, the screen-width has to be under 600px*/
@media (max-width: 600px) {
.box5 {
grid-column: 2/1;
align-items: center;
justify-content: center;
display: grid;
max-width: 128px;
width: 100%;
}
}
<div class="wrapper">
<div class="box1 box">128x128</div>
<div class="box2 box">128x128</div>
<div class="box3 box">128x128</div>
<div class="box4 box">128x128</div>
<div class="box5 box">280x128</div>
</div>
Like in the image
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
height: 180px;
}
.row {
display: flex;
flex-direction: row;
justify-content: center;
}
.box {
width: 10vw;
height: 10vw;
margin: 12px;
border: 1px solid black;
}
.box.big {
width: calc(20vw + 24px);
}
<div class="container">
<div class="row">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="row">
<div class="box big"></div>
</div>
</div>
Fields 1-5 directly below each other are centered to the middle at the current width
.container {
display: flex;
flex-direction: column;
align-items: center;
width: 100vw;
height: 100vw;
}
.box {
width: 10vw;
height: 10vw;
margin: 12px;
border: 1px solid black;
}
.box.big {
width: calc(20vw + 24px);
}
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box big"></div>
</div>
I searched over internet and couldn’t find this kind of grid layout.
“grid-template-columns” doesnt do the thing, cant do one box bigger then the others. I want 4 equal boxes and 1 box with equal height and width = square box * 2 + gridgap.
here is the image I’ve illustrated to make you understand what i ment.
I also tried to use display flex but I didnt get the Idea of it. Please, help me. Thanks!
Illustation of my idea
Actually I am backend developer, just playing around with frontend & helping my friends to finish the project. Can you please share you idea in code. Thanks in advance!
Yes man, great! Thanks! This is what I wanted. Can you please also add some css and make it responsive? I marked it as a right answer already! I want 1 box of width 100%, and the others below it.
@KamalMuradov You mean that fields 1-5 directly below each other are centered to the middle at the current width?
