Autor publikacji
Virtual Patriot - Administrator

grid-auto-flow

Data publikacji
Ostatnio edytowano

Przeznaczenie 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

Informacje techniczne 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

Wyjaśnienie

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.

Informacje dodatkowe

w przypadku gdy dla elementu HTML określiliśmy wyłącznie początkową krawędź wierszową lub/oraz końcową krawędź wierszową miejsca, do którego powinien zostać przypisany, wtedy taki element HTML staje się swobodnym elementem HTML, co oznacza, że gdy wspomniane miejsce zostało już zajęte przez inny wcześniej wyświetlony element HTML, wtedy swobodny element HTML zostanie przesunięty do następnej w kolejności najbliższej kolumny posiadającej wolne miejsce pomiędzy docelową początkową oraz końcową krawędzią wierszową

w przypadku gdy dla elementu HTML określiliśmy wyłącznie początkową krawędź kolumnową lub/oraz końcową krawędź kolumnową miejsca, do którego powinien zostać przypisany, wtedy taki element HTML staje się swobodnym elementem HTML, co oznacza, że gdy wspomniane miejsce zostało już zajęte przez inny wcześniej wyświetlony element HTML, wtedy swobodny element HTML zostanie przesunięty do następnego w kolejności najbliższego wiersza posiadającego wolne miejsce pomiędzy docelową początkową oraz końcową krawędzią kolumnową

w każdym z wymienionych przypadków, dla każdego kolejnego wyświetlonego elementu HTML nieposiadającego przypisanego konkretnego miejsca na siatce, następną w kolejności wolną komórką siatki staje się ta wolna komórka siatki, która występuje po ostatnio wyświetlonym swobodnym elemencie HTML

Wartość domyślna

row

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.

Dostępne wartości

słowo kluczowe dense

Sposób podawania

należy podać słowo kluczowe dense, jeżeli chcemy, aby każdy kolejny element HTML nieposiadający przypisanego konkretnego miejsca na siatce elementu HTML tworzącego układ siatki oraz wyświetlony po dowolnych swobodnych elementach HTML mógł należeć do wolnych komórek siatki występujących przed tymi swobodnymi elementami HTML

Wartość domyślna

brak

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>