Komunikat na pasku bocznym

Ta prezentacja wykorzystuje funkcję minmax() do układów siatki. W wersji demonstracyjnej ta funkcja służy do ustawienia minimalnego rozmiaru paska bocznego na 100px, a na większych ekranach umożliwia zastosowanie tej funkcji do 25%. Pasek boczny zawsze zajmuje 25% obszaru nadrzędnego elementu nadrzędnego, dopóki wartość 25% nie będzie mniejsza niż 100px.

Dodaj ją, używając właściwości grid-template-columns z tą wartością: minmax(100px, 25%) 1fr. Element w pierwszej kolumnie (w tym przypadku na pasku bocznym) otrzyma minmax o wartości 100px po 25%, a drugi element (sekcja main w tym przypadku) zajmuje resztę miejsca jako pojedyncza ścieżka 1fr.

.parent {
  display: grid;
  grid-template-columns: minmax(100px, 25%) 1fr;
}

HTML

<div class="parent">
    <div class="section yellow" contenteditable>
    Min: 100px / Max: 25%
    </div>
    <div class="section blue" contenteditable>
      This element takes the second grid position (1fr), meaning
      it takes up the rest of the remaining space.
    </div>
  </div>

CSS

        .parent {
  display: grid;
  grid-template-columns: minmax(100px, 25%) 1fr;
}