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>

[JS Bin]

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) {
      .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>

[JS Bin]

Štítky:

Komentáře: Okomentovat

Přihlášení k odběru Komentáře k příspěvku [Atom]





<< Domovská stránka