'How do I arrange an HTML/CSS grid so that elements first go in a row and then move to the next depending on page width?
(Most of the CSS code and some of the HTML code are from W3Schools, as credit.)
.grid-container {
display: in-line grid;
gap: 25px;
grid-template-rows: 150px 150px
}
.grid-item {
text-align: center;
}
.charGridButton {
background-color: DodgerBlue;
border: none;
border-radius: 8px;
color: white;
height: 150px;
width: 150px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: "Verdana";
transition-duration: 0.2s;
cursor: pointer;
}
.teamCharButton {
background-color: DodgerBlue;
}<div class="grid-container">
<a href="SonicAndCo/Sonic_the_Hedgehog.html">
<div class="grid-item"><button class="charGridButton teamCharButton">
<img src="https://static.wikia.nocookie.net/sonic/images/2/2d/TSR_Sonic.png" height=75px><br/>
Sonic the Hedgehog
</button></div>
</a>
<div class="grid-item"><button class="charGridButton teamCharButton">
<img src="https://static.wikia.nocookie.net/sonic/images/2/2d/TSR_Sonic.png" height=75px><br/>
Miles "Tails" Prower
</button></div>
<div class="grid-item"><button class="charGridButton teamCharButton">
<img src="https://static.wikia.nocookie.net/sonic/images/2/2d/TSR_Sonic.png" height=75px><br/>
Knuckles the Echidna
</button></div>
<div class="grid-item"><button class="charGridButton teamCharButton">
<img src="https://static.wikia.nocookie.net/sonic/images/2/2d/TSR_Sonic.png" height=75px><br/>
Amy Rose
</button></div>
<div class="grid-item"><button class="charGridButton teamCharButton">
<img src="https://static.wikia.nocookie.net/sonic/images/2/2d/TSR_Sonic.png" height=75px><br/>
Shadow the Hedgehog
</button></div>
<div class="grid-item"><button class="charGridButton teamCharButton">
<img src="https://static.wikia.nocookie.net/sonic/images/2/2d/TSR_Sonic.png" height=75px><br/>
Rouge the Bat
</button></div>
<div class="grid-item"><button class="charGridButton teamCharButton">
<img src="https://static.wikia.nocookie.net/sonic/images/2/2d/TSR_Sonic.png" height=75px><br/>
Cream the Rabbit
</button></div>
<div class="grid-item"><button class="charGridButton teamCharButton">
<img src="https://static.wikia.nocookie.net/sonic/images/2/2d/TSR_Sonic.png" height=75px><br/>
Blaze the Cat
</button></div>
<div class="grid-item"><button class="charGridButton teamCharButton">
<img src="https://static.wikia.nocookie.net/sonic/images/2/2d/TSR_Sonic.png" height=75px><br/>
Silver the Hedgehog
</button></div>
<div class="grid-item"><button class="charGridButton teamCharButton">
<img src="https://static.wikia.nocookie.net/sonic/images/2/2d/TSR_Sonic.png" height=75px><br/>
Floee the Fox
</button></div>
</div>Not only that I want to have the buttons for Sonic, Tails, Knuckles, etc. to appear next to each other on a row in a grid, I want the number of buttons in a row to depend on the page width.
Here's how I'd put it: Current page width depicts buttons for Sonic, Tails, Knuckles, and Amy on the same row. If I zoom out, a button for Shadow is moved to the first row and the button for my soon-to-be replaced OC Floee takes its place at the last part of the second row. If I zoom in, the button for Amy is moved to the next row and the button for Silver is moved to the next row.
Solution 1:[1]
You need to use grid-template-colums and set it to automatically resize the children.
.grid-container {
display: grid;
gap: 25px;
grid-template-columns: repeat(auto-fit, minmax(150px, auto));
}
.grid-item {
text-align: center;
}
.charGridButton {
background-color: DodgerBlue;
border: none;
border-radius: 8px;
color: white;
height: 150px;
width: 150px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: "Verdana";
transition-duration: 0.2s;
cursor: pointer;
}
.teamCharButton {
background-color: DodgerBlue;
}<div class="grid-container">
<a href="SonicAndCo/Sonic_the_Hedgehog.html">
<div class="grid-item"><button class="charGridButton teamCharButton">
<img src="https://static.wikia.nocookie.net/sonic/images/2/2d/TSR_Sonic.png" height=75px><br/>
Sonic the Hedgehog
</button></div>
</a>
<div class="grid-item"><button class="charGridButton teamCharButton">
<img src="https://static.wikia.nocookie.net/sonic/images/2/2d/TSR_Sonic.png" height=75px><br/>
Miles "Tails" Prower
</button></div>
<div class="grid-item"><button class="charGridButton teamCharButton">
<img src="https://static.wikia.nocookie.net/sonic/images/2/2d/TSR_Sonic.png" height=75px><br/>
Knuckles the Echidna
</button></div>
<div class="grid-item"><button class="charGridButton teamCharButton">
<img src="https://static.wikia.nocookie.net/sonic/images/2/2d/TSR_Sonic.png" height=75px><br/>
Amy Rose
</button></div>
<div class="grid-item"><button class="charGridButton teamCharButton">
<img src="https://static.wikia.nocookie.net/sonic/images/2/2d/TSR_Sonic.png" height=75px><br/>
Shadow the Hedgehog
</button></div>
<div class="grid-item"><button class="charGridButton teamCharButton">
<img src="https://static.wikia.nocookie.net/sonic/images/2/2d/TSR_Sonic.png" height=75px><br/>
Rouge the Bat
</button></div>
<div class="grid-item"><button class="charGridButton teamCharButton">
<img src="https://static.wikia.nocookie.net/sonic/images/2/2d/TSR_Sonic.png" height=75px><br/>
Cream the Rabbit
</button></div>
<div class="grid-item"><button class="charGridButton teamCharButton">
<img src="https://static.wikia.nocookie.net/sonic/images/2/2d/TSR_Sonic.png" height=75px><br/>
Blaze the Cat
</button></div>
<div class="grid-item"><button class="charGridButton teamCharButton">
<img src="https://static.wikia.nocookie.net/sonic/images/2/2d/TSR_Sonic.png" height=75px><br/>
Silver the Hedgehog
</button></div>
<div class="grid-item"><button class="charGridButton teamCharButton">
<img src="https://static.wikia.nocookie.net/sonic/images/2/2d/TSR_Sonic.png" height=75px><br/>
Floee the Fox
</button></div>
</div>Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Yadab |