Autor publikacji
Virtual Patriot - Administrator

grid-auto-flow

Data publikacji
Ostatnio edytowano

Opis właściwości grid-auto-flow

Za pomocą właściwości grid-auto-flow możemy określić domyślny sposób układania się kolejnych elementów HTML należących do siatki interesującego nas elementu HTML tworzącego układ siatki. Mowa tu o tych elementach HTML, które nie zostały przez nas przypisane do żadnego konkretnego miejsca na siatce elementu HTML tworzącego układ siatki (za pomocą którejś z następujących właściwości CSS: grid-row-start, grid-row-end, grid-column-start, grid-column-end, grid-row, grid-column, grid-area).

Informacje dodatkowe

brak

Dodatkowe techniczne informacje o właściwości grid-auto-flow

przeznaczenie
pozycja

dowolna (oraz static lub relative dla elementów HTML należących do siatki elementu HTML tworzącego układ siatki)

dziedziczenie

nie

wartość initial

row

wyjątki initial

brak

animowanie

tak (animacja schodkowa)

Interpretacja właściwości grid-auto-flow

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

nie

Edge

tak

Zobacz więcej informacji o interpretacji właściwości .

Opis wartości właściwości grid-auto-flow

wzorzec wartości

Opis

Za pomocą właściwości grid-auto-flow oraz z góry zdefiniowanego wzorca wartości możemy określić domyślny sposób układania się kolejnych elementów HTML należących do siatki interesującego nas elementu HTML tworzącego układ siatki.

Składniki wzorca wartości właściwości grid-auto-flow

Przykładowe zapisy

row

column

dense

row dense

column dense

orientation

Składnik orientation nie jest wymaganym składnikiem wzorca wartości właściwości grid-auto-flow. Składnik orientation określa domyślny sposób układania się kolejnych elementów HTML należących do siatki interesującego nas elementu HTML tworzącego układ siatki.

Dostępne wartości składnika orientation

row

Wartość row składnika orientation sprawia, że domyślnym sposobem układania się kolejnych elementów HTML należących do siatki interesującego nas elementu HTML tworzącego układ siatki będzie sposób wierszowy.

Sposób wierszowy oznacza, że każdy kolejno wyświetlający się element HTML nieposiadający przypisanego konkretnego miejsca na siatce powinien należeć do pierwszej wolnej komórki siatki pierwszego wiersza budującego siatkę. Gdy w wierszu budującym siatkę nie ma już wolnych komórek, wtedy wspomniany element HTML zostanie przeniesiony do pierwszej w kolejności wolnej komórki siatki następnego wiersza budującego daną siatkę.

column

Wartość column składnika orientation sprawia, że domyślnym sposobem układania się kolejnych elementów HTML należących do siatki interesującego nas elementu HTML tworzącego układ siatki będzie sposób kolumnowy.

Sposób kolumnowy oznacza, że każdy kolejno wyświetlający się element HTML nieposiadający przypisanego konkretnego miejsca na siatce powinien należeć do pierwszej wolnej komórki siatki pierwszej kolumny budującej siatkę. Gdy w kolumnie budującej siatkę nie ma już wolnych komórek, wtedy wspomniany element HTML zostanie przeniesiony do pierwszej w kolejności wolnej komórki siatki następnej kolumny budującej daną siatkę.

dense

Składnik dense nie jest wymaganym składnikiem wzorca wartości właściwości grid-auto-flow. Składnik dense określa czy każdy kolejny element HTML nieposiadający przypisanego konkretnego miejsca na siatce interesującego nas elementu HTML tworzącego układ siatki oraz wyświetlony po dowolnych swobodnych elementach HTML może należeć do wolnych komórek siatki występujących przed tymi swobodnymi elementami HTML.

Przykład

  grid-auto-flow:column;
div-1
div-2
div-3
div-4
div-5

Domyślnym sposobem układania się drugiego, trzeciego oraz piątego elementu "div" należącego do siatki przykładowego elementu "div#gridbox" jest sposób kolumnowy, ponieważ do wspomnianego elementu "div#gridbox" została dodana właściwość "grid-auto-flow" wraz z wartością "column".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      #gridbox {
        display:grid;
        grid-template-rows:repeat(6, 70px);
        grid-template-columns:repeat(6, 70px);
        grid-auto-flow:column;
        background-color:#7DCDE8;
      }

      #gridbox > div {
        padding:0.5em;
        font-size:1.3em;
      }

      #gridbox > :nth-child(1) {
        grid-row-start:5;
        grid-row-end:6;
        grid-column-start:1;
        grid-column-end:2;
        background-color:red;
      }

      #gridbox > :nth-child(2) {
        background-color:orange;
      }

      #gridbox > :nth-child(3) {
        background-color:yellow;
      }

      #gridbox > :nth-child(4) {
        grid-row-start:2;
        grid-row-end:3;
        background-color:pink;
      }

      #gridbox > :nth-child(5) {
        background-color:gold;
      }
    </style>
  </head>

  <body>

    <div id="gridbox">
      <div>div-1</div>
      <div>div-2</div>
      <div>div-3</div>
      <div>div-4</div>
      <div>div-5</div>
    </div>

  </body>
</html>