Autor publikacji
Virtual Patriot - Administrator

grid-auto-columns

Data publikacji
Ostatnio edytowano

Przeznaczenie właściwości grid-auto-columns

Za pomocą właściwości grid-auto-columns możemy określić domyślny rozmiar szerokości wszystkich kolumn budujących siatkę interesującego nas elementu HTML tworzącego układ siatki.

Informacje dodatkowe

każda szerokość związana z właściwością grid-auto-columns tyczy się szerokości logicznej

właściwość grid-auto-columns nie oddziałuje na rozmiar szerokości tych kolumn, których rozmiar szerokości został przez nas określony za pomocą właściwości grid-template-columns

Informacje techniczne o właściwości grid-auto-columns

przeznaczenie
pozycja

dowolna

dziedziczenie

nie

wartość initial

auto

wyjątki initial

brak

animowanie

tak (animacja schodkowa)

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

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-columns

rozmiar

Wyjaśnienie

Za pomocą właściwości grid-auto-columns oraz wybranej wartości należącej do składnika size pierwszego wzorca wartości właściwości grid-template-columns (z wyłączeniem funkcji repeat()) możemy określić domyślny rozmiar szerokości wszystkich kolumn budujących siatkę interesującego nas elementu HTML tworzącego układ siatki.

Przykład

  grid-auto-columns:75px;
div-1
div-2
div-3

Domyślny rozmiar szerokości wszystkich kolumn budujących siatkę przykładowego elementu "div#gridbox" wynosi 75 pikseli, ponieważ do wspomnianego elementu "div#gridbox" została dodana właściwość "grid-auto-columns" wraz z wartością "75px".

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-auto-rows:50px;
        grid-auto-columns:75px;
        background-color:#7DCDE8;
      }

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

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

      #gridbox > :nth-child(2) {
        grid-row-start:3;
        grid-row-end:7;
        grid-column-start:1;
        grid-column-end:3;
        background-color:orange;
      }

      #gridbox > :nth-child(3) {
        grid-row-start:4;
        grid-row-end:7;
        grid-column-start:4;
        grid-column-end:7;
        background-color:yellow;
      }
    </style>
  </head>

  <body>

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

  </body>
</html>

kombinacja wartości

Wyjaśnienie

Za pomocą kombinacji kilku (oddzielonych od siebie znakiem spacji) wartości należących do właściwości grid-auto-columns możemy sprawić, że kolejne poszczególne kolumny budujące siatkę interesującego nas elementu HTML tworzącego układ siatki będą posiadały różny domyślny rozmiar szerokości.

Podana przez nas kombinacja wartości właściwości "grid-auto-columns" nie może zawierać wartości globalnych.

Przykład

  grid-auto-columns:100px 50px;
div-1
div-2
div-3

Domyślny rozmiar szerokości wszystkich nieparzystych kolumn budujących siatkę przykładowego elementu "div#gridbox" wynosi 100 pikseli, natomiast domyślny rozmiar szerokości wszystkich parzystych kolumn budujących siatkę przykładowego elementu "div#gridbox" wynosi 50 pikseli, ponieważ do wspomnianego elementu "div#gridbox" została dodana właściwość "grid-auto-columns" wraz z następującą kombinacją wartości: "100px 50px".

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-auto-rows:70px;
        grid-auto-columns:100px 50px;
        background-color:#7DCDE8;
      }

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

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

      #gridbox > :nth-child(2) {
        grid-row-start:3;
        grid-row-end:7;
        grid-column-start:1;
        grid-column-end:3;
        background-color:orange;
      }

      #gridbox > :nth-child(3) {
        grid-row-start:4;
        grid-row-end:7;
        grid-column-start:4;
        grid-column-end:7;
        background-color:yellow;
      }
    </style>
  </head>

  <body>

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

  </body>
</html>