1. Tata letak kisi CSS Grid tutorial

1. Tutorial tata letak kisi CSS Grid

2024-07-12

Tutorial tata letak kisi CSS Grid

I. Ikhtisar

Tata letak kisi (Grid) adalah solusi tata letak CSS yang paling kuat.

Ini membagi halaman web menjadi beberapa grid, dan grid yang berbeda dapat digabungkan secara sewenang-wenang untuk membuat berbagai tata letak. Di masa lalu, efek yang hanya dapat dicapai melalui kerangka CSS yang kompleks kini sudah terpasang di browser.

Tata letak seperti gambar di atas adalah keistimewaan tata letak Grid.

Tata letak grid memiliki kesamaan tertentu dengan tata letak Flex, keduanya dapat menentukan posisi beberapa item di dalam wadah. Namun, terdapat perbedaan penting.

Tata letak fleksibel adalah tata letak sumbu, dan hanya dapat menentukan posisi "item" terhadap sumbu, yang dapat dianggap sebagaiTata letak satu dimensi . Tata letak kisi membagi wadah menjadi "baris" dan "kolom", menghasilkan sel, lalu menentukan sel tempat "item berada", yang dapat dianggap sebagaiTata letak 2D . Tata letak grid jauh lebih kuat daripada tata letak Flex.

2. Konsep dasar

Sebelum mempelajari tata letak Grid, Anda perlu memahami beberapa konsep dasar.

2.1 Kontainer dan proyek

Suatu area dengan tata letak grid disebut “wadah”. Elemen anak yang menggunakan posisi grid di dalam wadah disebut "item".

<div>
  <div><p>1</p></div>
  <div><p>2</p></div>
  <div><p>3</p></div>
</div>
1
2
3
4
5

Pada kode di atas, yang terluar<div>Elemennya adalah wadahnya, dan ketiganya adalah bagian dalamnya<div>Elemen adalah item.

Melihat: Proyek hanya dapat menjadi elemen turunan tingkat atas dari penampung, dan tidak menyertakan elemen turunan proyek, seperti kode di atas<p> Elemen bukanlah item. Tata letak kisi hanya berlaku pada proyek.

2.2 Baris dan kolom

Area horizontal di dalam wadah disebut “baris”, dan area vertikal disebut “kolom”.

Pada gambar di atas, area gelap horizontal adalah “baris” dan area gelap vertikal adalah “kolom”.

2.3 Sel

Daerah perpotongan baris dan kolom disebut “sel”.

Dalam keadaan normal,nOK danmkolom akan menghasilkann x m sel. Misalnya 3 baris dan 3 kolom akan menghasilkan 9 sel.

2.4 Garis kisi

Garis yang membagi grid disebut “garis grid”. Garis kisi horizontal membagi baris, dan garis kisi vertikal membagi kolom.

Dalam keadaan normal,nOKEn + 1garis kisi horizontal akar,mTerdaftarm + 1Ada tiga garis kisi vertikal, misalnya ada empat garis kisi horizontal dalam tiga baris.

Gambar di atas adalah grid 4 x 4 dengan total 5 garis grid horizontal dan 5 garis grid vertikal.

3. Properti wadah

Properti tata letak Grid dibagi menjadi dua kategori. Satu tipe didefinisikan pada kontainer dan disebut properti kontainer; tipe lainnya didefinisikan pada proyek dan disebut properti proyek. Bagian ini pertama kali memperkenalkan properti container.

3.1 atribut tampilan

display: gridMenentukan wadah untuk menggunakan tata letak kotak.

div {
  display: grid;
}
1
2
3

Gambar di atas adalahdisplay: griddariMemengaruhi。

Secara default, elemen kontainer adalah elemen tingkat blok, namun elemen tersebut juga dapat disetel ke elemen sebaris.

div {
  display: inline-grid;
}
1
2
3

Kode di atas menentukandivMerupakan elemen inline yang menggunakan tata letak grid secara internal.

Gambar di atas adalahdisplay: inline-griddariMemengaruhi。

Perhatikan bahwa setelah mengatur tata letak kisi, sub-elemen wadah (item)float、display: inline-block、display: table-cell、vertical-alignDancolumn-*Semua pengaturan lainnya tidak valid.

3.2 atribut grid-template-columns, atribut grid-template-rows

Setelah wadah menentukan tata letak kisi, wadah kemudian harus membagi baris dan kolom.grid-template-columnsProperti menentukan lebar kolom setiap kolom,grid-template-rowsProperti mendefinisikan tinggi baris setiap baris.

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}
1
2
3
4
5

kode di atasMenentukan kisi dengan tiga baris dan tiga kolom. Lebar kolom dan tinggi baris keduanya100px。

Selain menggunakan satuan absolut, Anda juga dapat menggunakan persentase.

.container {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 33.33% 33.33% 33.33%;
}
1
2
3
4
5

(1)ulang()

Terkadang, sangat merepotkan untuk menulis nilai yang sama berulang kali, terutama jika terdapat banyak grid.Saat ini, Anda dapat menggunakannyarepeat() Fungsi yang menyederhanakan nilai berulang.Kode di atas menggunakanrepeat()Ditulis ulang sebagai berikut.

.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}
1
2
3
4
5

repeat()Menerima dua parameter, parameter pertama adalah jumlah pengulangan (3 pada contoh di atas), dan parameter kedua adalah nilai yang akan diulang.

repeat()Tidak apa-apa untuk mengulangi suatu pola.

grid-template-columns: repeat(2, 100px 20px 80px);
1

kode di atas6 kolom ditentukan, lebar kolom pertama dan keempat adalah100px, kolom kedua dan kelima20px, kolom ketiga dan kolom keenam80px。

(2) kata kunci isi otomatis

Terkadang, ukuran sel tetap, namun ukuran wadahnya tidak ditentukan.Jika Anda ingin setiap baris (atau kolom) menampung sel sebanyak mungkin, Anda dapat menggunakanauto-fillKata kunci mewakili pelengkapan otomatis.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}
1
2
3
4

kode di atasMewakili lebar setiap kolom100px, lalu terisi secara otomatis hingga wadah tidak dapat menampung kolom lagi.

Selain dariauto-fill, dan kata kunciauto-fit , perilaku keduanya pada dasarnya sama.Hanya jika wadahnya cukup lebar untuk menampung semua sel dalam satu baris, dan lebar selnya tidak tetapperbedaan perilaku：auto-fillLebar yang tersisa akan diisi dengan sel kosong.auto-fitakan mencoba memperluas lebar sel.

(3) kata kunci fr

Untuk mengekspresikan hubungan proporsional dengan mudah, tata letak kotak menyediakanfr Kata kunci (kependekan dari pecahan, artinya “fragmen”).Jika lebar kedua kolom tersebut adalah1frDan2fr, yang berarti nilai terakhir dua kali lipat nilai sebelumnya.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
1
2
3
4

kode di atasMewakili dua kolom dengan lebar yang sama.

frDapat digunakan bersama dengan satuan panjang absolut, yang sangat nyaman.

.container {
  display: grid;
  grid-template-columns: 150px 1fr 2fr;
}
1
2
3
4

kode di atasartinya kolom pertama lebarnya 150 piksel dan kolom kedua lebarnya setengah dari kolom ketiga.

(4) minmaks()

minmax() Fungsi ini menghasilkan rentang panjang, yang menunjukkan bahwa panjangnya berada dalam rentang ini. Ia menerima dua parameter, nilai minimum dan nilai maksimum.

grid-template-columns: 1fr 1fr minmax(100px, 1fr);
1

Dalam kode di atas,minmax(100px, 1fr)Menunjukkan bahwa lebar kolom tidak kurang dari100px, tidak lebih besar dari1fr。

(5) kata kunci otomatis

autoPanjang representasi kata kunci ditentukan oleh browser itu sendiri.

grid-template-columns: 100px auto 100px;
1

Pada kode di atas, lebar kolom kedua pada dasarnya sama dengan lebar maksimum sel pada kolom tersebut, kecuali jika isi sel diaturmin-width, dan nilai ini lebih besar dari lebar maksimum.

(6) Nama garis grid

grid-template-columnsatribut dangrid-template-rowsDi properti, Anda juga dapat menggunakan tanda kurung siku untuk menentukan nama setiap garis kisi untuk memudahkan referensi di masa mendatang.

.container {
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}
1
2
3
4
5

Kode di atas menentukan layout grid 3 baris x 3 kolom, sehingga terdapat 4 garis grid vertikal dan 4 garis grid horizontal. Di dalam tanda kurung siku terdapat nama delapan baris.

Tata letak kisi memungkinkan beberapa nama untuk baris yang sama, seperti[fifth-line row-5]。

(7) Contoh tata letak

grid-template-columns Properti sangat berguna untuk tata letak halaman web. Tata letak dua kolom hanya membutuhkan satu baris kode.

.wrapper {
  display: grid;
  grid-template-columns: 70% 30%;
}
1
2
3
4

Kode di atas mengatur kolom kiri menjadi 70% dan kolom kanan menjadi 30%.

Tata letak dua belas kotak tradisional juga mudah untuk ditulis.

grid-template-columns: repeat(12, 1fr);
1

3.3 atribut celah baris kisi, atribut celah kolom kisi, atribut celah kisi

grid-row-gapProperti mengatur jarak antar baris (line spacing),grid-column-gapProperti mengatur jarak antar kolom (column spacing).

.container {
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}
1
2
3
4

kode di atastengah,grid-row-gapDigunakan untuk mengatur spasi baris,grid-column-gapDigunakan untuk mengatur jarak kolom.

grid-gapPropertinya adalahgrid-column-gapDangrid-row-gapBentuk singkatan gabungan dari , sintaksisnya adalah sebagai berikut.

grid-gap: <grid-row-gap> <grid-column-gap>;
1

Oleh karena itu, potongan kode CSS di atas setara dengan kode berikut.

.container {
  grid-gap: 20px 20px;
}
1
2
3

jikagrid-gapNilai kedua dihilangkan dan browser menganggap nilai kedua sama dengan nilai pertama.

Menurut standar terbaru, ketiga nama atribut di atasgrid-Awalannya telah dihapus,grid-column-gapDangrid-row-gapditulis sebagaicolumn-gapDanrow-gap，grid-gapditulis sebagaigap。

3.4 properti area template grid

Tata letak kisi memungkinkan Anda menentukan "area", yang terdiri dari satu atau beberapa sel.grid-template-areasProperti digunakan untuk mendefinisikan area.

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas:
    'a b c'
    'd e f'
    'g h i';
}
1
2
3
4
5
6
7
8
9

Kode di atas pertama-tama membagi 9 sel dan kemudian memberi namaatibaiKesembilan area tersebut masing-masing berhubungan dengan sembilan sel ini.

Cara penulisan menggabungkan beberapa sel menjadi satu area adalah sebagai berikut.

grid-template-areas:
  'a a a'
  'b b b'
  'c c c';
1
2
3
4

Kode di atas membagi 9 sel menjadia、b、ctiga bidang.

Di bawah ini adalah contoh tata letak.

grid-template-areas:
  'header header header'
  'main main sidebar'
  'footer footer footer';
1
2
3
4

Pada kode di atas, bagian atas adalah area headerheader, bagian bawah adalah area footerfooter, bagian tengahnya adalahmainDansidebar。

Jika beberapa area tidak perlu dieksploitasi, gunakan "titik" (.)cepat.

grid-template-areas:
  'a . c'
  'd . f'
  'g . i';
1
2
3
4

Pada kode di atas, kolom tengahnya berupa titik, artinya sel tersebut tidak digunakan, atau sel tersebut bukan milik area mana pun.

Perhatikan bahwa penamaan wilayah mempengaruhi garis grid.Garis kisi awal setiap area diberi nama secara otomatis区域名-start, garis kisi yang diakhiri diberi nama secara otomatis区域名-end。

Misalnya, daerah tersebut diberi namaheader, maka garis kisi mendatar dan garis kisi vertikal pada posisi awal disebutheader-start, garis kisi horizontal dan garis kisi vertikal pada posisi akhir disebutheader-end。

3.5 atribut aliran otomatis grid

Setelah grid dibagi, elemen anak dari container akan secara otomatis ditempatkan di setiap grid secara berurutan. Urutan penempatan defaultnya adalah “baris pertama, kolom kedua”, yaitu mengisi baris pertama terlebih dahulu, kemudian mulai menempatkan baris kedua, yaitu urutan angka pada gambar di bawah ini.

Perintah ini diberikan olehgrid-auto-flowDitentukan oleh atribut, nilai defaultnya adalahrow , yaitu, "baris dulu, lalu baris".Anda juga dapat mengaturnya kecolumn, menjadi "baris dulu, lalu baris".

grid-auto-flow: column;
1

kode di atassudah diaturcolumnMulai sekarang, urutan penempatannya akan menjadi seperti gambar di bawah ini.

grid-auto-flowSelain mengatur atribut menjadirowDancolumn, juga dapat disetel kerow denseDancolumn dense . Kedua nilai ini terutama digunakan untuk secara otomatis menempatkan item yang tersisa setelah item tertentu ditetapkan posisinya.

Contoh di bawah iniBiarkan proyek No. 1 dan proyek No. 2 masing-masing menempati dua sel, lalu di defaultgrid-auto-flow: rowDalam hal ini, tata letak berikut akan dihasilkan.

Pada gambar di atas, posisi di belakang item no.1 kosong, hal ini dikarenakan item no.3 secara default mengikuti item no.2, sehingga akan berada di peringkat belakang item no.2.

Sekarang ubah pengaturan dan atur kerow dense, artinya "baris pertama, kolom kedua", dan isi sekencang mungkin tanpa spasi.

grid-auto-flow: row dense;
1

kode di atasEfeknya adalah sebagai berikut.

Gambar di atas akan mengisi baris pertama terlebih dahulu, lalu baris kedua, jadi item 3 akan mengikuti item 1. Item No. 8 dan No. 9 akan ditempatkan di baris keempat.

Jika Anda mengubah pengaturan menjadicolumn dense, artinya "kolom dulu, lalu baris", dan isi spasi sebanyak mungkin.

grid-auto-flow: column dense;
1

kode di atasEfeknya adalah sebagai berikut.

Gambar di atas akan mengisi kolom pertama terlebih dahulu, kemudian kolom kedua, sehingga item no.3 ada di kolom pertama dan item no.4 ada di kolom kedua. Butir 8 dan 9 dimasukkan ke dalam kolom keempat.

3.6 atribut justify-item, atribut align-item, atribut place-item

justify-itemsProperti mengatur posisi horizontal konten sel (kiri, tengah, kanan),align-itemsProperti mengatur posisi vertikal (atas, tengah, bawah) konten sel.

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}
1
2
3
4

Kedua atribut ini ditulis persis sama dan dapat mengambil nilai berikut.

start: menyelaraskan tepi awal sel.
end: Sejajarkan dengan tepi ujung sel.
tengah: Pusat di dalam sel.
stretch: meregang untuk menempati seluruh lebar sel (nilai default).

.container {
  justify-items: start;
}
1
2
3

kode di atasMenunjukkan bahwa isi sel rata ke kiri, dan efeknya seperti yang ditunjukkan di bawah ini.

.container {
  align-items: start;
}
1
2
3

kode di atasMenunjukkan bahwa konten sel sejajar dengan kepala, dan efeknya seperti yang ditunjukkan di bawah ini.

place-itemsPropertinya adalahalign-itemsatribut danjustify-itemsBentuk singkatan gabungan dari properti.

place-items: <align-items> <justify-items>;
1

Di bawah ini adalah contohnya.

place-items: start end;
1

Jika nilai kedua dihilangkan, browser menganggapnya sama dengan nilai pertama.

3.7 atribut justify-content, atribut align-content, atribut place-content

justify-contentAtributnya adalah posisi horizontal seluruh area konten di dalam wadah (kiri, tengah, kanan),align-contentAtributnya adalah posisi vertikal seluruh area konten (atas, tengah, bawah).

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
1
2
3
4

Kedua atribut ini ditulis persis sama dan dapat mengambil nilai berikut. (Gambar di bawah semuanya berdasarkanjustify-contentMisalnya propertialign-content Diagram atributnya sama persis, hanya saja orientasi horizontal diubah menjadi orientasi vertikal. )

start - batas awal wadah yang disejajarkan.

end - menyelaraskan batas ujung wadah.

center - Pusatkan wadah di dalamnya.

regangan - Jika ukuran item tidak ditentukan, regangkan hingga menempati seluruh wadah kisi.

space-around - ruang yang sama di kedua sisi setiap item. Oleh karena itu, jarak antar barang adalah dua kali lebih besar dari jarak antara barang dan batas wadah.

space-between - Ada jarak yang sama antar item dan tidak ada spasi antara item dan batas kontainer.

space-evenly - Jarak antar item sama, dan jarak antara item dan batas wadah memiliki panjang yang sama.

place-contentPropertinya adalahalign-contentatribut danjustify-contentBentuk singkatan gabungan dari properti.

place-content: <align-content> <justify-content>;
1

Di bawah ini adalah contohnya.

place-content: space-around space-evenly;
1

Jika Anda menghilangkan nilai kedua, browser berasumsi bahwa nilai kedua sama dengan nilai pertama.

3.8 properti grid-auto-columns, properti grid-auto-rows

Terkadang, beberapa item diberi posisi di luar grid yang ada. Misalnya, kisi hanya memiliki 3 kolom, tetapi item tertentu ditentukan di baris ke-5. Saat ini, browser akan secara otomatis membuat grid tambahan untuk memudahkan penempatan item.

grid-auto-columnsatribut dangrid-auto-rows Properti digunakan untuk mengatur lebar kolom dan tinggi baris dari grid berlebihan yang dibuat secara otomatis oleh browser.Mereka ditulis dengan cara yang sama sepertigrid-template-columnsDangrid-template-rows Persis sama. Jika kedua properti ini tidak ditentukan, browser menentukan lebar kolom dan tinggi baris grid baru seluruhnya berdasarkan ukuran konten sel.

Contoh di bawah iniDi dalam, kisi yang terbagi adalah 3 baris x 3 kolom, tetapi item No. 8 ditentukan di baris ke-4 dan item No. 9 ditentukan di baris ke-5.

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-auto-rows: 50px;
}
1
2
3
4
5
6

Kode di atas menetapkan bahwa tinggi baris baru adalah 50 piksel secara seragam (tinggi baris asli adalah 100 piksel).

3.9 atribut templat kisi, atribut kisi

grid-templatePropertinya adalahgrid-template-columns、grid-template-rowsDangrid-template-areasBentuk singkatan gabungan dari ketiga properti ini.

gridPropertinya adalahgrid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flowSingkatan gabungan dari enam properti ini.

Dari segi kemudahan membaca dan menulis, disarankan untuk tidak menggabungkan atribut, sehingga kedua atribut tersebut tidak akan diperkenalkan secara detail di sini.

4. Atribut proyek

Properti berikut ditentukan pada proyek.

4.1 properti awal kolom grid, properti akhir kolom grid, properti awal baris grid, properti ujung baris grid

Posisi proyek dapat ditentukan. Metode spesifiknya adalah dengan menentukan empat batas proyek dan garis kisi mana yang diposisikan masing-masing.

grid-column-startProperti: Garis kisi vertikal tempat batas kiri berada
grid-column-endProperti: Garis kisi vertikal tempat batas kanan berada
grid-row-startProperti: Garis kisi horizontal tempat batas atas berada
grid-row-endProperti: Garis kisi horizontal tempat batas bawah berada

.item-1 {
  grid-column-start: 2;
  grid-column-end: 4;
}
1
2
3
4

kode di atasMenentukan bahwa batas kiri item 1 adalah garis kisi vertikal kedua, dan batas kanan adalah garis kisi vertikal keempat.

Pada gambar di atas, hanya batas kiri dan kanan item No. 1 yang ditentukan, dan batas atas dan bawah tidak ditentukan, sehingga akan digunakan posisi default, yaitu batas atas adalah garis kisi horizontal pertama, dan batas bawahnya adalah garis kisi horizontal kedua.

Kecuali item No. 1, item lain tidak memiliki posisi tertentu dan secara otomatis ditata oleh browser. Saat ini, posisinya ditentukan oleh containergrid-auto-flowDitentukan oleh atribut, nilai default atribut ini adalahrow , jadi akan disusun "baris dulu, lalu kolom".Pembaca dapat mengubah nilai atribut ini menjadicolumn、row denseDancolumn dense, untuk melihat perubahan posisi item lainnya.

Contoh di bawah iniIni adalah efek dari penentuan posisi empat perbatasan.

.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
}
1
2
3
4
5
6

Nilai keempat atribut tersebut selain ditetapkan sebagai nomor garis grid, juga dapat ditetapkan sebagai nama garis grid.

.item-1 {
  grid-column-start: header-start;
  grid-column-end: header-end;
}
1
2
3
4

Pada kode di atas, posisi batas kiri dan kanan ditentukan sebagai nama garis grid.

Nilai dari keempat atribut ini juga dapat digunakanspanKata kunci yang menunjukkan “rentang”, yaitu berapa banyak grid yang terbentang antara batas kiri dan kanan (batas atas dan bawah).

.item-1 {
  grid-column-start: span 2;
}
1
2
3

kode di atasMenunjukkan bahwa batas kiri butir No. 1 terbentang 2 grid dari batas kanan.

Hal ini terkait dengankode di bawah iniEfeknya persis sama.

.item-1 {
  grid-column-end: span 2;
}
1
2
3

Dengan menggunakan keempat atribut ini, jika ada item yang tumpang tindih, gunakanz-indexProperti menentukan urutan item yang tumpang tindih.

4.2 atribut kolom kisi, atribut baris kisi

grid-columnPropertinya adalahgrid-column-startDangrid-column-endBentuk singkatan gabungan darigrid-rowPropertinya adalahgrid-row-startatribut dangrid-row-endSingkatan gabungan dari .

.item {
  grid-column: <start-line/ <end-line>;
  grid-row: <start-line/ <end-line>;
}
1
2
3
4

Di bawah ini adalah contohnya.

.item-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}
/* 等同于 */
.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}
1
2
3
4
5
6
7
8
9
10
11

Dalam kode di atas, proyekitem-1Menempati baris pertama, dari baris kolom pertama hingga baris kolom ketiga.

Di antara kedua atribut ini, Anda juga dapat menggunakanspanKata kunci yang menunjukkan berapa banyak grid yang akan direntangkan.

.item-1 {
  background: #b03532;
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
/* 等同于 */
.item-1 {
  background: #b03532;
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}
1
2
3
4
5
6
7
8
9
10
11

kode di atasdi, proyekitem-1Area yang ditempati meliputi baris pertama + baris kedua, dan kolom pertama + kolom kedua.

Garis miring dan bagian berikut dapat dihilangkan dan merentangkan grid secara default.

.item-1 {
  grid-column: 1;
  grid-row: 1;
}
1
2
3
4

Dalam kode di atas, proyekitem-1Menempati grid pertama di sudut kiri atas.

4.3 atribut area grid

grid-areaAtribut menentukan area di mana item tersebut ditempatkan.

.item-1 {
  grid-area: e;
}
1
2
3

kode di atasDi , Proyek No. 1 berlokasi diearea, efeknya seperti yang ditunjukkan di bawah ini.

grid-areaProperti juga dapat digunakan sebagaigrid-row-start、grid-column-start、grid-row-end、grid-column-endBentuk singkatan gabungan secara langsung menentukan lokasi proyek.

.item {
  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}
1
2
3

Di bawah ini adalah acontoh。

.item-1 {
  grid-area: 1 / 1 / 3 / 3;
}
1
2
3

4.4 atribut membenarkan diri, atribut menyelaraskan diri, atribut tempat diri

justify-selfProperti mengatur posisi horizontal (kiri, tengah, kanan) dari konten sel, diikuti olehjustify-itemsProperti yang digunakan sama persis, tetapi hanya berlaku untuk satu item.

align-selfProperti mengatur posisi vertikal (atas, tengah, bawah) konten sel, diikuti olehalign-itemsPenggunaan atributnya sama persis, dan hanya memengaruhi satu proyek.

.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}
1
2
3
4

Kedua properti dapat mengambil empat nilai berikut.

start: menyelaraskan tepi awal sel.
end: Sejajarkan dengan tepi ujung sel.
tengah: Pusat di dalam sel.
stretch: meregang untuk menempati seluruh lebar sel (nilai default).

Dibawah ini adalahjustify-self: startcontoh.

.item-1 {
  justify-self: start;
}
1
2
3

place-selfPropertinya adalahalign-selfatribut danjustify-selfBentuk singkatan gabungan dari properti.

place-self: <align-self> <justify-self>;
1

Di bawah ini adalah contohnya.

place-self: center center;
1

Jika nilai kedua dihilangkan,place-selfProperti akan menganggap kedua nilai tersebut sama.

Berbagi teknologi

1. Tutorial tata letak kisi CSS Grid

Tutorial tata letak kisi CSS Grid

I. Ikhtisar

2. Konsep dasar

2.1 Kontainer dan proyek

2.2 Baris dan kolom

2.3 Sel

2.4 Garis kisi

3. Properti wadah

3.1 atribut tampilan

3.2 atribut grid-template-columns, atribut grid-template-rows

3.3 atribut celah baris kisi, atribut celah kolom kisi, atribut celah kisi

3.4 properti area template grid

3.5 atribut aliran otomatis grid

3.6 atribut justify-item, atribut align-item, atribut place-item

3.7 atribut justify-content, atribut align-content, atribut place-content

3.8 properti grid-auto-columns, properti grid-auto-rows

3.9 atribut templat kisi, atribut kisi

4. Atribut proyek

4.1 properti awal kolom grid, properti akhir kolom grid, properti awal baris grid, properti ujung baris grid

4.2 atribut kolom kisi, atribut baris kisi

4.3 atribut area grid

4.4 atribut membenarkan diri, atribut menyelaraskan diri, atribut tempat diri

Profil pribadi

informasi kontak saya