Grid

Podcast CSS - 011: Grid

Tata letak yang sangat umum dalam desain web adalah tata letak {i>header<i}, {i>sidebar<i}, isi, dan {i>footer<i}.

Selama bertahun-tahun, ada banyak metode untuk menyelesaikan tata letak ini, tetapi dengan petak CSS, tidak hanya relatif mudah, tetapi Anda juga memiliki banyak opsi. Grid sangat berguna dalam menggabungkan kontrol yang memberikan ukuran ekstrinsik yang fleksibel dengan ukuran intrinsik, sehingga ideal untuk tata letak semacam ini. Ini karena {i>grid<i} adalah metode tata letak yang dirancang untuk konten dua dimensi. Artinya, menata letaknya dalam baris dan kolom secara bersamaan.

Saat membuat tata letak petak, Anda menentukan petak dengan baris dan kolom. Kemudian Anda menempatkan item ke petak tersebut, atau mengizinkan browser untuk menempatkannya secara otomatis ke dalam sel yang telah Anda buat. Ada banyak hal yang perlu dibuat {i>grid<i}, tetapi dengan gambaran umum tentang apa yang tersedia, Anda dapat segera membuat tata letak {i>grid<i}.

Ringkasan

Jadi, apa yang dapat Anda lakukan dengan {i>grid<i}? Tata letak petak memiliki fitur berikut. Anda akan mempelajari semuanya dalam panduan ini.

1. {i>Grid<i} dapat ditentukan dengan baris dan kolom. Anda dapat memilih ukuran trek baris dan kolom ini atau reaksinya terhadap ukuran konten.
2. Turunan langsung dari penampung petak akan otomatis ditempatkan ke petak ini.
3. Atau, Anda dapat menempatkan item di lokasi akurat yang Anda inginkan.
4. Garis dan area pada petak dapat diberi nama untuk mempermudah penempatan.
5. Ruang cadangan dalam kontainer petak dapat didistribusikan di antara jalur.
6. Item {i>grid<i} dapat disejajarkan dalam areanya.

Terminologi petak

Grid hadir dengan banyak terminologi baru, karena ini adalah pertama kalinya CSS memiliki sistem tata letak yang sebenarnya.

Garis petak

{i>Grid<i} terdiri dari garis, yang berjalan secara horizontal dan vertikal. Jika {i>grid<i} Anda memiliki empat kolom, maka akan memiliki lima baris kolom, termasuk yang setelah kolom terakhir.

Baris diberi nomor mulai dari 1, dengan penomoran mengikuti mode penulisan dan arah skrip komponen. Artinya, baris kolom 1 akan berada di sebelah kiri dalam bahasa yang ditulis dari kiri-ke-kanan seperti bahasa Inggris, dan di sebelah kanan dalam bahasa yang ditulis dari kanan-ke-kiri seperti bahasa Arab.

Jalur petak

{i>Track<i} adalah ruang di antara dua garis kisi. Jalur baris berada di antara dua garis baris dan pelacakan kolom di antara dua garis kolom. Saat membuat {i>grid<i}, kita membuat {i>track<i} ini dengan menetapkannya.

Sel kisi

Sel {i>grid<i} adalah ruang terkecil pada {i>grid<i} yang ditentukan oleh perpotongan {i>track<i} baris dan kolom. Alat ini seperti sel tabel atau sel dalam {i>spreadsheet<i}. Jika Anda menentukan petak dan tidak menempatkan salah satu item, item tersebut akan otomatis ditata satu item ke dalam setiap sel petak yang ditentukan.

Area petak

Beberapa sel petak bersama-sama. Area petak dibuat dengan menyebabkan item membentang di atas beberapa jalur.

Kesenjangan

Selokan atau gang di antara trek. Untuk tujuan pengukuran, ini berfungsi seperti trek biasa. Anda tidak dapat menempatkan konten di dalam celah, tetapi Anda dapat merentangkan item petak di atasnya.

Penampung petak

Elemen HTML yang menerapkan display: grid, sehingga membuat konteks pemformatan petak baru untuk turunan langsung.

.container {
  display: grid;
}

Item petak

Item petak adalah item yang merupakan turunan langsung dari penampung petak.

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Baris dan kolom

Untuk membuat petak dasar, Anda dapat menentukan petak dengan tiga jalur kolom, jalur dua baris, dan celah 10 piksel di antara jalur seperti berikut.

.container {
    display: grid;
    grid-template-columns: 5em 100px 30%;
    grid-template-rows: 200px auto;
    gap: 10px;
}

Kisi-kisi ini menunjukkan banyak hal yang dijelaskan dalam bagian terminologi. {i>Dataframe<i} ini memiliki tiga pelacakan kolom. Setiap trek menggunakan satuan panjang yang berbeda. Alat ini memiliki dua trek baris, satu menggunakan satuan panjang dan satunya lagi otomatis. Saat digunakan sebagai ukuran trek mobil, bisa dianggap sebesar kontennya. Trek otomatis diubah ukurannya secara default.

Jika elemen dengan class .container memiliki item turunan, elemen tersebut akan segera tata letak di petak ini. Anda dapat melihatnya dalam demo di bawah.

Overlay petak di Chrome DevTools dapat membantu Anda memahami berbagai bagian petak.

Buka demo di Chrome. Periksa elemen dengan latar belakang abu-abu, yang memiliki ID container. Tandai petak dengan memilih badge petak di DOM, di samping elemen .container. Di tab Layout, pilih Display Line Numbers di menu dropdown untuk melihat nomor baris di petak Anda.

Kata kunci ukuran intrinsik

Selain dimensi panjang dan persentase seperti yang dijelaskan di bagian tentang unit ukuran, jalur petak dapat menggunakan kata kunci ukuran intrinsik. Kata kunci ini ditentukan dalam spesifikasi Box Sizing dan menambahkan metode tambahan untuk ukuran kotak di CSS, bukan hanya jalur petak.

• min-content
• max-content
• fit-content()

Kata kunci min-content akan membuat trek sekecil mungkin tanpa memuat konten trek lebih banyak. Mengubah contoh tata letak petak agar memiliki tiga jalur kolom dengan ukuran min-content akan berarti baris tersebut menjadi sempit seperti kata terpanjang dalam jalur.

Kata kunci max-content memiliki efek sebaliknya. Trek akan menjadi cukup lebar untuk semua konten ditampilkan dalam satu string panjang yang tidak terputus. Hal ini dapat menyebabkan overflow karena string tidak akan digabungkan.

Fungsi fit-content() bertindak seperti max-content pada awalnya. Namun, setelah jalur mencapai ukuran yang Anda teruskan ke fungsi, konten akan mulai digabungkan. Jadi, fit-content(10em) akan membuat jalur yang kurang dari 10 em, jika ukuran max-content kurang dari 10 em, tetapi tidak pernah lebih besar dari 10 em.

Dalam demo berikutnya, coba kata kunci ukuran intrinsik yang berbeda dengan mengubah ukuran trek petak.

Unit fr

Kami sudah memiliki dimensi panjang, persentase, dan juga kata kunci baru tersebut. Ada juga metode ukuran khusus yang hanya berfungsi di tata letak {i>grid<i}. Ini adalah unit fr, panjang fleksibel yang menjelaskan bagian ruang yang tersedia di penampung petak.

Unit fr berfungsi dengan cara yang sama seperti menggunakan flex: auto di flexbox. Ini mendistribusikan ruang setelah item ditata. Oleh karena itu untuk memiliki tiga kolom yang semuanya mendapatkan bagian ruang yang tersedia yang sama:

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

Saat unit fr membagikan ruang yang tersedia, unit ini dapat digabungkan dengan selisih ukuran tetap atau jalur ukuran tetap. Agar memiliki komponen dengan elemen ukuran tetap dan jalur kedua menggunakan berapa pun ruang yang tersisa, Anda dapat menggunakan sebagai daftar trek grid-template-columns: 200px 1fr.

Menggunakan nilai yang berbeda untuk unit fr akan berbagi ruang secara proporsional. Nilai yang lebih besar mendapatkan lebih banyak ruang kosong. Dalam demo di bawah ini, ubah nilai lagu ketiga.

Fungsi minmax()

Fungsi ini berarti Anda dapat menetapkan ukuran minimum dan maksimum untuk sebuah trek. Hal ini bisa sangat berguna. Jika kita mengambil contoh unit fr di atas yang mendistribusikan ruang yang tersisa, contoh tersebut dapat ditulis menggunakan minmax() sebagai minmax(auto, 1fr). Petak melihat ukuran intrinsik konten, lalu mendistribusikan ruang yang tersedia setelah memberikan ruang yang cukup untuk konten. Ini berarti, Anda mungkin tidak mendapatkan jalur yang masing-masing memiliki bagian yang sama dari semua ruang yang tersedia di penampung petak.

Untuk memaksa trek mengambil bagian yang sama dari ruang di penampung petak dikurangi celah, gunakan minmax. Ganti 1fr sebagai ukuran jalur dengan minmax(0, 1fr). Hal ini menjadikan ukuran minimum lagu 0 dan bukan ukuran konten min. Kemudian, petak akan mengambil semua ukuran yang tersedia dalam penampung, mengurangi ukuran yang diperlukan untuk setiap celah, dan membagikan sisanya sesuai dengan unit fr Anda.

Notasi repeat()

Jika ingin membuat petak trek 12 kolom dengan kolom yang sama, Anda dapat menggunakan CSS berikut.

.container {
    display: grid;
    grid-template-columns:
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr);
}

Atau, Anda dapat menuliskannya menggunakan repeat():

.container {
    display: grid;
    grid-template-columns: repeat(12, minmax(0,1fr));
}

Fungsi repeat() dapat digunakan untuk mengulangi bagian mana pun dari listingan trek Anda. Misalnya, Anda dapat mengulangi pola trek. Anda juga dapat menambahkan beberapa trek reguler dan bagian berulang.

.container {
    display: grid;
    grid-template-columns: 200px repeat(2, 1fr 2fr) 200px; /*creates 6 tracks*/
}

auto-fill dan auto-fit

Anda dapat menggabungkan semua yang telah Anda pelajari tentang ukuran jalur, minmax(), dan mengulangi, untuk membuat pola yang berguna dengan tata letak petak. Mungkin Anda tidak ingin menentukan jumlah jalur kolom, tetapi ingin membuat sebanyak yang sesuai dengan penampung Anda.

Anda dapat melakukannya dengan repeat() dan kata kunci auto-fill atau auto-fit. Dalam demo di bawah ini, kisi akan membuat sebanyak 200 piksel jalur yang sesuai dengan wadah. Buka demo di jendela baru dan lihat bagaimana petak berubah saat Anda mengubah ukuran area pandang.

Dalam demo ini, kita mendapatkan sebanyak mungkin trek yang sesuai. Namun, jalur tersebut tidak fleksibel. Anda akan mendapatkan celah di ujung sampai ada cukup ruang untuk trek 200 piksel lainnya. Jika Anda menambahkan fungsi minmax(), Anda dapat meminta trek sebanyak mungkin dengan ukuran minimum 200 piksel dan maksimum 1fr. Grid kemudian meletakkan trek 200 piksel dan ruang apa pun yang tersisa didistribusikan secara merata kepada mereka.

Ini akan menciptakan tata letak responsif dua dimensi tanpa memerlukan kueri media apa pun.

Ada sedikit perbedaan antara auto-fill dan auto-fit. Dalam demo berikutnya, bermain dengan tata letak petak menggunakan sintaksis yang dijelaskan di atas, tetapi hanya dengan dua item petak dalam penampung petak. Dengan menggunakan kata kunci auto-fill, Anda dapat melihat bahwa jalur kosong telah dibuat. Ubah kata kunci menjadi auto-fit dan trek akan diciutkan menjadi ukuran 0. Ini berarti bahwa jalur fleksibel sekarang semakin banyak menghabiskan ruang.

Kata kunci auto-fill dan auto-fit berfungsi dengan cara yang sama persis. Tidak ada perbedaan di antara keduanya setelah trek pertama diisi.

Penempatan otomatis

Sejauh ini Anda telah melihat penempatan otomatis petak dalam demo. Item ditempatkan pada petak satu per sel sesuai urutan kemunculannya di sumber. Untuk banyak tata letak, mungkin inilah yang Anda butuhkan. Jika Anda memerlukan kontrol lebih besar, ada beberapa hal yang mungkin ingin Anda lakukan. Yang pertama adalah menyesuaikan tata letak penempatan otomatis.

Menempatkan item dalam kolom

Perilaku default tata letak petak adalah menempatkan item di sepanjang baris. Sebagai gantinya, Anda dapat membuat item ditempatkan ke dalam kolom menggunakan grid-auto-flow: column. Anda harus menentukan jalur baris, jika tidak, item akan membuat jalur kolom intrinsik, dan menata letak semuanya dalam satu baris panjang.

Nilai-nilai ini berhubungan dengan mode penulisan dokumen. Baris selalu berjalan sesuai arah kalimat yang dijalankan dalam mode penulisan dokumen atau komponen. Dalam demo berikutnya, Anda dapat mengubah nilai mode grid-auto-flow dan properti writing-mode.

Trek berdurasi penuh

Anda dapat menyebabkan beberapa atau semua item dalam tata letak yang ditempatkan otomatis mencakup lebih dari satu trek. Gunakan kata kunci span ditambah jumlah baris yang akan diperluas sebagai nilai untuk grid-column-end atau grid-row-end.

.item {
    grid-column-end: span 2; /* will span two lines, therefore covering two tracks */
}

Karena Anda belum menentukan grid-column-start, hal ini menggunakan nilai awal auto dan ditempatkan sesuai dengan aturan penempatan otomatis. Anda juga dapat menentukan hal yang sama menggunakan singkatan grid-column:

.item {
    grid-column: auto / span 2;
}

Mengisi kekosongan

Tata letak yang ditempatkan otomatis dengan beberapa item yang mencakup beberapa trek dapat menghasilkan petak dengan beberapa sel yang tidak terisi. Perilaku default tata letak petak dengan tata letak yang ditempatkan sepenuhnya otomatis adalah selalu maju ke depan. Item akan ditempatkan sesuai dengan urutannya di sumber, atau modifikasi apa pun dengan properti order. Jika tidak ada cukup ruang untuk memuat sebuah item, grid akan meninggalkan celah dan berpindah ke jalur berikutnya.

Demo berikutnya akan menunjukkan perilaku ini. Kotak centang akan menerapkan mode pengemasan padat. Ini diaktifkan dengan memberi grid-auto-flow nilai dense. Dengan menerapkan nilai ini, grid akan mengambil item nanti dalam tata letak dan menggunakannya untuk mengisi kekosongan. Ini dapat berarti bahwa tampilan menjadi terputus dari urutan logis.

Menempatkan item

Anda sudah memiliki banyak fungsi dari CSS Grid. Sekarang, mari kita lihat cara kita menempatkan item di petak yang telah kita buat.

Hal pertama yang harus diingat adalah bahwa Tata Letak Petak CSS didasarkan pada kisi-kisi garis bernomor. Cara paling sederhana untuk menempatkan sesuatu ke dalam {i>grid<i} adalah dengan menempatkannya dari satu baris ke baris lainnya. Anda akan menemukan cara lain untuk menempatkan item dalam panduan ini, tetapi Anda selalu memiliki akses ke baris bernomor tersebut.

Properti yang dapat Anda gunakan untuk menempatkan item menurut nomor baris adalah:

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end

Keduanya memiliki cara pintas yang memungkinkan Anda menetapkan baris awal dan akhir sekaligus:

• grid-column
• grid-row

Untuk menempatkan item Anda, tetapkan garis awal dan akhir area petak tempat item harus ditempatkan.

.container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 200px 100px);
}

.item {
    grid-column-start: 1; /* start at column line 1 */
    grid-column-end: 4; /* end at column line 4 */
    grid-row-start: 2; /*start at row line 2 */
    grid-row-end: 4; /* end at row line 4 */
}

Chrome DevTools dapat memberi Anda panduan visual ke garis untuk memeriksa lokasi item Anda.

Penomoran baris mengikuti mode penulisan dan arah komponen. Dalam demo berikutnya, ubah mode atau arah penulisan untuk melihat bagaimana penempatan item tetap konsisten dengan cara teks mengalir.

Menumpuk item

Dengan menggunakan pemosisian berbasis baris, Anda dapat menempatkan item ke dalam sel petak yang sama. Ini berarti Anda dapat menumpuk item, atau menyebabkan satu item tumpang tindih sebagian dengan item lainnya. Item yang muncul kemudian pada sumber akan ditampilkan di atas item yang datang sebelumnya. Anda dapat mengubah urutan penumpukan ini menggunakan z-index sama seperti item yang diposisikan.

Nomor baris negatif

Saat membuat petak menggunakan grid-template-rows dan grid-template-columns, Anda akan membuat apa yang dikenal sebagai petak eksplisit. Ini adalah kisi-kisi yang telah Anda tentukan dan berikan ukuran pada lintasan.

Terkadang Anda akan memiliki item yang ditampilkan di luar petak eksplisit ini. Misalnya, Anda dapat menentukan jalur kolom, lalu menambahkan beberapa baris item petak tanpa harus menentukan jalur baris. Trek akan diubah ukurannya secara otomatis secara default. Anda juga dapat menempatkan item menggunakan grid-column-end yang berada di luar petak eksplisit yang ditentukan. Dalam kedua kasus ini, petak akan membuat jalur agar tata letak berfungsi, dan jalur ini disebut sebagai petak implisit.

Sering kali hal itu tidak akan berpengaruh jika Anda bekerja dengan {i>grid<i} implisit atau eksplisit. Namun, dengan penempatan berbasis baris, Anda mungkin akan menemukan perbedaan utama di antara keduanya.

Dengan menggunakan nomor baris negatif, Anda dapat menempatkan item dari baris akhir petak eksplisit. Hal ini dapat berguna jika Anda ingin item ditampilkan dari baris kolom pertama hingga terakhir. Dalam hal ini, Anda dapat menggunakan grid-column: 1 / -1. Item akan membentang tepat di seluruh petak eksplisit.

Namun, ini hanya berfungsi untuk petak eksplisit. Ambil tata letak tiga baris item yang ditempatkan otomatis di mana Anda ingin item pertama membentang hingga baris akhir petak.

Anda mungkin berpikir bahwa Anda dapat memberikan item tersebut grid-row: 1 / -1. Dalam demo di bawah, Anda dapat melihat bahwa cara ini tidak berfungsi. Jalur dibuat dalam petak implisit, tidak ada cara untuk mencapai akhir petak menggunakan -1.

Mengubah ukuran trek implisit

Trek yang dibuat di petak implisit akan diubah ukurannya secara default. Namun, jika Anda ingin mengontrol ukuran baris, gunakan properti grid-auto-rows, dan untuk kolom grid-auto-columns.

Untuk membuat semua baris implisit dengan ukuran minimum 10em dan ukuran maksimum auto:

.container {
    display: grid;
    grid-auto-rows: minmax(10em, auto);
}

Untuk membuat kolom implisit dengan pola trek lebar 100px dan 200px. Dalam hal ini, kolom implisit pertama adalah 100 px, 200 px kedua, 100 px ketiga, dan seterusnya.

.container {
    display: grid;
    grid-auto-columns: 100px 200px;
}

Garis petak bernama

Menempatkan item ke dalam tata letak dapat menjadi lebih mudah jika baris tersebut memiliki nama, bukan angka. Anda dapat memberi nama baris mana pun di {i>grid<i} dengan menambahkan nama pilihan Anda di antara tanda kurung siku. Anda dapat menambahkan beberapa nama, dengan dipisahkan spasi di dalam tanda kurung yang sama. Setelah diberi nama, baris tersebut dapat digunakan sebagai pengganti angka.

.container {
    display: grid;
    grid-template-columns:
      [main-start aside-start] 1fr
      [aside-end content-start] 2fr
      [content-end main-end]; /* a two column layout */
}

.sidebar {
    grid-column: aside-start / aside-end;
    /* placed between line 1 and 2*/
}

footer {
    grid-column: main-start / main-end;
    /* right across the layout from line 1 to line 3*/
}

Area Template Petak

Anda juga dapat memberi nama area petak dan menempatkan item ke area yang telah diberi nama tersebut. Ini adalah teknik yang bagus karena memungkinkan Anda melihat tampilan komponen Anda di CSS.

Untuk memulai, beri nama turunan langsung dari penampung petak Anda menggunakan properti grid-area:

header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.content {
    grid-area: content;
}

footer {
    grid-area: footer;
}

Nama bisa berupa apa pun yang Anda sukai selain kata kunci auto dan span. Setelah semua item diberi nama, gunakan properti grid-template-areas untuk menentukan sel petak yang akan ditempati setiap item. Setiap baris didefinisikan dalam tanda kutip.

.container {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-areas:
        "header header header header"
        "sidebar content content content"
        "sidebar footer footer footer";
}

Ada beberapa aturan saat menggunakan grid-template-areas.

• Nilai harus berupa petak lengkap tanpa sel kosong.
• Untuk span trek, ulangi nama tersebut.
• Area yang dibuat dengan mengulangi nama harus berbentuk persegi panjang dan tidak dapat dipisahkan.

Jika Anda melanggar salah satu aturan di atas, nilai akan dianggap sebagai tidak valid dan dibuang.

Untuk menyisakan ruang putih di petak, gunakan . atau kelipatan tanpa spasi putih di antara keduanya. Misalnya, untuk membiarkan sel pertama di petak kosong, saya dapat menambahkan serangkaian karakter .:

.container {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-areas:
        "....... header header header"
        "sidebar content content content"
        "sidebar footer footer footer";
}

Karena seluruh tata letak Anda ditentukan di satu tempat, Anda dapat dengan mudah menentukan ulang tata letak menggunakan kueri media. Pada contoh berikutnya, saya telah membuat tata letak dua kolom yang berpindah ke tiga kolom dengan menentukan ulang nilai grid-template-columns dan grid-template-areas. Buka contoh di jendela baru untuk menyesuaikan ukuran area pandang dan melihat perubahan tata letak.

Anda juga dapat melihat hubungan properti grid-template-areas dengan writing-mode dan arah, seperti metode petak lainnya.

Properti disingkat

Ada dua properti pintasan yang memungkinkan Anda menetapkan banyak properti petak sekaligus. Properti ini mungkin terlihat sedikit membingungkan sampai Anda menguraikannya dengan tepat. Anda bebas memutuskan apakah ingin menggunakannya atau lebih suka menggunakan tangan panjang.

grid-template

Properti grid-template adalah singkatan untuk grid-template-rows, grid-template-columns, dan grid-template-areas. Baris ditentukan terlebih dahulu, beserta nilai grid-template-areas. Ukuran kolom ditambahkan setelah /.

.container {
    display: grid;
    grid-template:
      "head head head" minmax(150px, auto)
      "sidebar content content" auto
      "sidebar footer footer" auto / 1fr 1fr 1fr;
}

Properti grid

Singkatan grid dapat digunakan dengan cara yang sama persis seperti pintasan grid-template. Ketika digunakan dengan cara ini, properti grid lain yang diterimanya akan diatur ulang ke nilai awal. Set lengkapnya adalah:

• grid-template-rows
• grid-template-columns
• grid-template-areas
• grid-auto-rows
• grid-auto-columns
• grid-auto-flow

Atau, Anda dapat menggunakan singkatan ini untuk menentukan perilaku petak implisit, misalnya:

.container {
    display: grid;
    grid: repeat(2, 80px) / auto-flow  120px;
}

Perataan

Tata letak petak menggunakan properti perataan yang sama dengan yang Anda pelajari dalam panduan untuk flexbox. Dalam petak, properti yang dimulai dengan justify- selalu digunakan pada sumbu sejajar, arah kalimat yang dijalankan dalam mode penulisan Anda.

Properti yang dimulai dengan align- digunakan pada sumbu blok, arah blok yang berada dalam mode penulisan Anda.

• justify-content dan align-content: distribusikan ruang tambahan dalam penampung petak di sekitar atau di antara jalur.
• justify-self dan align-self: diterapkan ke item petak untuk memindahkannya di dalam area petak tempat item tersebut ditempatkan.
• justify-items dan align-items: diterapkan ke penampung petak untuk menetapkan semua properti justify-self pada item.

Mendistribusikan ruang ekstra

Dalam demo ini, petak lebih besar dari ruang yang dibutuhkan untuk menata jalur dengan lebar tetap. Ini berarti kita memiliki ruang dalam dimensi petak dan inline. Coba nilai align-content dan justify-content yang berbeda untuk melihat perilaku trek.

Perhatikan bagaimana jarak menjadi lebih besar saat menggunakan nilai seperti space-between, dan setiap item petak yang mencakup dua jalur juga akan bertambah untuk menyerap ruang tambahan yang ditambahkan ke celah tersebut.

Memindahkan konten

Item dengan warna latar belakang tampaknya mengisi sepenuhnya area petak tempat item tersebut ditempatkan, karena nilai awal untuk justify-self dan align-self adalah stretch.

Dalam demo, ubah nilai justify-items dan align-items untuk melihat bagaimana nilai ini mengubah tata letak. Area petak tidak berubah ukurannya, sebagai gantinya, item dipindahkan di dalam area yang ditentukan.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang {i>grid<i}

main {
  display: grid;
}

Referensi

Panduan ini telah memberi Anda gambaran tentang berbagai bagian dari spesifikasi tata letak {i>grid<i}. Untuk mengetahui lebih lanjut, lihat referensi berikut.

• Tata Letak Petak CSS MMD
• Panduan Lengkap untuk Petak
• Membuat Container Grid
• Memeriksa petak CSS di Chrome DevTools
• Koleksi komprehensif materi pembelajaran jaringan