Wadah Kotak CSS

Hi guys, ini adalah posting ke-2 dalam seri CSS Grid. Pada bagian ini, kita akan belajar lebih banyak tentang elemen container grid.

Isi dari seri artikel CSS Grid:

• Ikhtisar Kotak CSS
• Kotak CSS: Wadah
• Kotak CSS: Item

Sebelum mulai belajar, saya ingatkan sedikit tentang pengertian dari wadah kisi.

Apa itu Wadah Kotak?

Ini adalah elemen induk dengan atribut yang diterapkan display: grid atau display: inline-grid. Elemen container adalah elemen yang akan berisi item-item yang akan di layout pada contoh di bawah ini.

<div class="container">
  <div class="item item-0"></div>
  <div class="item item-1"></div>
  <div class="item item-2"></div>
</div>

Properti wadah kisi

Pada bagian ini kita akan belajar secara detail tentang properti dari wadah grid dan bagaimana menggunakannya.

menampilkan

Atribut yang menentukan elemen adalah wadah grid.

Nilai yang valid:

• kisi: membuat kotak blok.
• inline-grid: membuat blok kisi sebaris.

.container {
  display: grid | inline-grid;
}

grid-template-columns / grid-template-rows

Properti ini menentukan jumlah kolom dan baris dalam grid. Nilai properti akan menentukan ukuran grid track, jarak antar track adalah garis grid.

Nilai yang valid:

• : nilai ukuran, persentase, Anda juga bisa menggunakan satuan pecahan (fr).
• : apakah Anda memiliki nama khusus untuk baris tersebut.

.container {
  grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
  grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
}

Contoh di bawah menjelaskan lebih jelas nilai-nilai yang digunakan dalam template grid. Pada bagian kolom akan dibagi menjadi 5 kolom, dengan nilai kolom dari kiri ke kanan: 40px, 50px, auto, 50px, 40px. Nilai auto akan menjadi nilai lebar yang tersisa setelah mendeklarasikan nilai kolom: tổng width - (40px + 50px + 50px + 40px).

.container {
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

Sama dengan template-row dengan 3 baris, baris pertama akan memiliki nilai 25% tinggi dari container, 100px berikutnya dan sisanya. Item saat dinyatakan akan diurutkan dari kiri ke kanan, naik ke bawah oke orang.

Selain itu, Anda juga bisa memberi nama garis grid sesuai dengan sintaks di bawah ini. Nama garis kisi akan diapit dalam tanda kurung siku [].

.container {
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

Dalam contoh berikut, kolom garis kisi ke-2 memiliki 2 nama row1-end Dan row2-start:

.container {
  grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}

Jika templat Anda memiliki beberapa kolom/baris berurutan dengan nilai yang sama, Anda dapat menggunakan fungsi repeat() mendeklarasikan.

.container {
  grid-template-columns: repeat(3, 20px [col-start]);
}

Nilai templat pada contoh di atas akan sesuai dengan:

.container {
  grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start];
}

Anda juga bisa menggunakan fr untuk kustomisasi dalam desain responsif. Misalnya jika kita perlu membagi menjadi 3 kolom dengan ukuran yang sama, dan 1/3 dari lebar wadah grid.

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

Nilai unit fr akan dihitung setelah mengurangkan nilai absolut yang dinyatakan. Pada contoh di bawah ini, nilai kolom ke-2 adalah 150px, kolom yang tersisa akan memiliki nilai dalam (tổng width - 150px) / 3.

.container {
  grid-template-columns: 1fr 150px 1fr 1fr;
}

grid-template-areas

Atribut ini digunakan untuk mendefinisikan template, dengan menggunakan nama yang dideklarasikan (mengingatkan).

Nilai yang valid:

• : nama khusus untuk area kisi.
• . : tandai sel grid kosong
• tidak ada: jangan beri nama area grid.

.container {
  grid-template-areas: 
    "<grid-area-name> | . | none | ..."
    "...";
}

Misalnya:

.item-a {  grid-area: header;}
.item-b {  grid-area: main;}
.item-c {  grid-area: sidebar;}
.item-d {  grid-area: footer;}

.container {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

Pada kode di atas akan membuat grid dengan 4 kolom dan 3 baris. Baris pertama diberi nama header menempati 4 sel. baris ke-2 main akan menempati 2 sel, 1 sel kosong dan 1 sel sidebar. Baris terakhir footer ada 4 sel. Silakan lihat uraian di bawah ini.

Setiap baris saat dideklarasikan harus memiliki jumlah kolom yang sama. Anda dapat menggunakan banyak titik untuk menentukan sel kosong, selama tidak ada spasi di antara titik-titik tersebut ..

grid-template

Ini adalah atribut gabungan grid-template-rows, grid-template-columnsDan grid-template-areas pada satu deklarasi.

Nilai yang valid:

• none: mengatur ulang semua nilai dari 3 properti ke nilai awalnya.
• <grid-template-rows> / <grid-template-columns>: Mendeklarasikan nilai yang sesuai untuk grid-template-rows Dan grid-template-columnsNilai dari grid-template-areas akan diatur none.

.container {
  grid-template: none | <grid-template-rows> / <grid-template-columns>;
}

Alternatifnya, Anda juga dapat membuat deklarasi sedikit lebih rumit dengan kode berikut:

.container {
  grid-template:
    [row1-start] "header header header" 25px [row1-end]
    [row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto;
}

Contoh di atas akan sesuai dengan:

.container {
  grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;
  grid-template-areas: 
    "header header header" 
    "footer footer footer";
}

kisi-kolom-celah / kisi-baris-celah

2 properti ini akan menentukan nilai garis kisi dari baris dan kolom.

Nilai yang valid:

• : nilai ukuran garis grid.

.container {
  grid-column-gap: <line-size>;
  grid-row-gap: <line-size>;
}

Dalam contoh contoh di bawah ini, kita akan memiliki 3 kolom: 100px, 50pxDan 100px dengan spasi kolom 10px; 3 baris: 80px, autoDan 80px dengan jarak baris dari 15px.

.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  grid-column-gap: 10px;
  grid-row-gap: 15px;
}

celah jaringan

Properti ini menggabungkan celah kolom dan celah baris menjadi satu baris deklarasi.

Nilai yang valid:

• : nilai jarak.

.container {
  grid-gap: <grid-row-gap> <grid-column-gap>;
}

Misalnya:

.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  grid-gap: 15px 10px;
}

Catatan: jika Anda hanya mendeklarasikan 1 nilai, maka column-gap Dan row-gap akan berbagi nilai ini.

grid-gap: 15px akan sesuai dengan grid-gap: 15px 15px

membenarkan-item

Sejajarkan konten sel kisi secara horizontal.

Nilai yang valid:

• awal: menyelaraskan item ke margin kiri
• tengah: menyelaraskan item ke tengah
• akhir: menyelaraskan item ke margin kanan
• menggeliat: Seret konten agar pas dengan seluruh lebar sel grid.

.container {
  justify-items: start | end | center | stretch;
}

Beberapa contoh ilustrasi di bawah ini:

.container {
  justify-items: start;
}

Sejalan dengan itu, bila berlaku justify-items: end | center | stretch. Hasilnya adalah sebagai berikut:

Jika Anda ingin menggunakan setiap sel dengan gaya pembenaran yang berbeda, item kisi akan menggunakan atribut tersebut justify-self. Saya akan membahas bagian ini secara rinci di posting berikutnya.

menyelaraskan-item

Atribut ini mirip dengan justify-itemstetapi diterapkan secara vertikal.

Nilai yang valid:

• awal: menyelaraskan item ke tepi atas.
• akhir: menyelaraskan item ke tepi bawah.
• tengah: menyelaraskan item ke tengah secara vertikal
• menggeliat: Seret konten agar pas dengan tinggi item.

.container {
  align-items: start | end | center | stretch;
}

Ilustrasi di bawah ini:

tempat-item

Properti ini merupakan kombinasi dari justify-items dan align-items menjadi satu properti.

Nilai yang valid:

• – : Sesuai nilai untuk align-items Dan justify-itemsjika Anda hanya memasukkan 1 nilai, 2 properti ini akan memiliki nilai yang sama.

membenarkan-konten

Terkadang lebar total konten sel tidak sama dengan lebar wadah. Terutama ketika Anda menggunakan nilai absolut seperti px. Dalam kasus seperti itu, kami menggunakan properti justify-content untuk menyelaraskan sel kisi dalam wadah secara horizontal.

Nilai yang valid:

• awal: sejajarkan ke tepi kiri wadah.
• akhir: sejajarkan ke tepi kanan wadah.
• tengah: menyelaraskan ke pusat wadah.
• menggeliat: Seret konten lengkap melintasi penampung.
• ruang-sekitar: menambahkan spasi di antara setiap kolom, termasuk kedua tepi kiri dan kanan wadah dengan nilai 1/2 jarak antara 2 kolom.
• ruang-antara: menambahkan spasi di antara setiap kolom, tidak termasuk sisi kiri dan kanan wadah.
• ruang-merata: menambahkan spasi di antara setiap kolom, termasuk 2 tepi kiri dan kanan wadah dengan nilai setara ruang antara 2 kolom.

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;	
}

Anda melihat ilustrasi di bawah ini untuk memahami fungsi dari atribut ini:

Mohon diperhatikan agar tidak bingung space-around dengan space-evenly Silakan.

menyelaraskan-konten

Atribut ini serupa justify-contenttetapi berlaku secara vertikal.

konten tempat

Properti place-content adalah kombinasi dari justify-content Dan align-content menjadi garis deklarasi umum.

Nilai yang valid:

• / : nilai yang sesuai untuk align-content dan justify-content. Dua properti akan dibagi jika hanya ada satu nilai masukan.

grid-auto-columns / grid-auto-rows

Properti ini menentukan nilai trek kisi yang dihasilkan secara otomatis (ketika item keluar dari template) secara horizontal grid-auto-columns dan vertikal dengan grid-auto-rows.

Nilai yang valid:

• : nilai panjang, Anda dapat menggunakan nilai absolut atau relatif seperti fr.

.container {
  grid-auto-columns: <track-size> ...;
  grid-auto-rows: <track-size> ...;
}

Contoh ilustratif berikut akan memperjelas atribut ini dengan lebih jelas.

.container {
  grid-template-columns: 60px 60px;
  grid-template-rows: 90px 90px;
}

Selanjutnya, misalkan Anda menggunakan atribut grid-colum Dan grid-row (detail di postingan selanjutnya) untuk memposisikan item grid

.item-a {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.item-b {
  grid-column: 5 / 6;
  grid-row: 2 / 3;
}

Pada contoh kode di atas, kita tentukan posisi item-b mulai dari kolom garis grid ke-5 sampai kolom ke-6; dari garis grid 2 ke baris 3. Tapi di template grid kita jangan tentukan kolom ke-5sekarang item-b akan berada di luar template dan memiliki nilai column = auto. Karena di luar template, nilai kolom di tengah (kolom 3 dan 4) akan dihitung dalam 0 dengan nilai celah jaringan default. Dalam hal ini, kami menggunakan grid-auto-columns Dan grid-auto-rows untuk menentukan ukuran kolom dan baris yang dibuat secara otomatis di luar template. Berikut adalah kolom 3 dan 4.

.container {
  grid-auto-columns: 60px;
}

grid-auto-aliran

Terkadang Anda tidak mendeklarasikan atau mendeklarasikan posisi yang hilang untuk elemen item grid, properti grid-auto-flow menentukan bagaimana browser mengatur item ini di grid.

Nilai yang valid:

• baris: Secara otomatis mengatur item yang tersisa di baris horizontal sebelumnya.
• kolom: Secara otomatis mengatur item yang tersisa di barisan depan.
• padat: mengisi otomatis posisi horizontal (baris padat) atau vertikal (padat kolom).

.container {
  grid-auto-flow: row | column | row dense | column dense;
}

Silakan lihat contoh di bawah ini untuk memudahkan pemahaman.

kisi

Ini adalah properti gabungan dari properti di atas: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columnsDan grid-auto-flow.

Nilai yang valid:

• tidak ada: atur semua sub-properti ke nilai awalnya.
• : Mirip dengan properti grid-template.
• / [ auto-flow && dense? ] ? mengatur nilai atribut grid-template-rows. Jika auto-flow berdiri di belakang /properti grid-auto-flow berharga column. Jika ada lebih dense diikuti, lalu terapkan dense column . Tanpa grid-auto-columnsmaka nilainya diatur ke auto.
• [ auto-flow && dense? ] ? / – menetapkan nilai grid-template-columns. Jika auto-flow berdiri di depan /properti grid-auto-flow berharga row. Jika ada lebih dense diikuti, lalu terapkan dense row. Tanpa grid-auto-rowsmaka nilainya diatur ke auto.

Ilustrasi:

.container {
    grid: 100px 300px / 3fr 1fr;
  }

Setara dengan kode di bawah ini. Nilai di kedua sisi tanda / adalah nilai yang sesuai dari grid-template-rows Dan grid-template-columns.

.container {
    grid-template-rows: 100px 300px;
    grid-template-columns: 3fr 1fr;
  }

Demikian pula, 2 cuplikan kode berikut ini setara:

.container {
    grid: auto-flow dense 100px / 1fr 2fr;
  }

.container {
    grid-auto-flow: row dense;
    grid-auto-rows: 100px;
    grid-template-columns: 1fr 2fr;
  }

Kami beralih ke contoh yang sedikit lebih rumit untuk menerapkan lebih banyak atribut grid-template-areas, grid-template-rowsDan grid-template-columns .

.container {
    grid: [row1-start] "header header header" 1fr [row1-end]
          [row2-start] "footer footer footer" 25px [row2-end]
          / auto 50px auto;
  }

Cuplikan di atas akan setara dengan:

.container {
    grid-template-areas: 
      "header header header"
      "footer footer footer";
    grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
    grid-template-columns: auto 50px auto;    
  }

Contoh yang lebih kompleks akan disajikan dalam artikel berikut. Namun, jika Anda tidak terbiasa dengan sintaks dari gridlalu terapkan setiap atribut secara terpisah.