10. 12. 2018
Seriál CSS Grid: 2× div vedle sebe
2 div-y, které chci mít vedle sebe. 1fr 1fr znamená, že oba div-y okupují prostor stejným dílem (jednotka fr = fraction). 1fr auto by znamenalo, že 2. div bude mít šířku danou jeho obsahem a 1. div vyplní zbytek.
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr; /* nebo např.: 1fr auto */
}
</style>
<div class="grid-container">
<div>Item 1</div>
<div>Item 2</div>
</div>
Přestylování pod sebe přes @media – pod 320px jsou div-y pod sebou, jinak vedle sebe:
<style>
@media screen and (min-width: 320px) {
@media screen and (min-width: 320px) {
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr; /* nebo např.: 1fr auto */
}
}
</style>
<div class="grid-container">
<div>Item 1</div>
<div>Item 2</div>
Štítky: CSS Grid