Grid

Podcast CSS - 011: Petak

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

Selama bertahun-tahun, ada banyak metode untuk menyelesaikan tata letak ini, tetapi dengan {i>CSS grid,<i} tidak hanya relatif mudah, tetapi Anda memiliki banyak pilihan. {i>Grid<i} sangat berguna dalam menggabungkan kontrol ukuran ektrinsik memberikan fleksibilitas ukuran intrinsik, sehingga cocok untuk tata letak semacam ini. Hal ini karena petak adalah metode tata letak yang didesain untuk konten dua dimensi. Yaitu, meletakkan sesuatu dalam baris dan kolom secara bersamaan.

Saat membuat tata letak petak, Anda menentukan petak dengan baris dan kolom. Kemudian Anda menempatkan item ke {i>grid<i} tersebut, atau membiarkan {i>browser<i} menempatkannya secara otomatis ke dalam sel-sel yang telah Anda buat. Ada banyak hal yang akan {i>grid<i}, tetapi dengan gambaran umum tentang apa yang tersedia Anda akan membuat tata letak {i>grid <i}dalam waktu singkat.

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 cara menentukan ukuran trek baris dan kolom ini atau reaksi 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 di penampung petak dapat didistribusikan di antara jalur.
6. Item petak dapat disejajarkan dalam areanya.

Terminologi petak

{i>Grid<i} dilengkapi dengan banyak terminologi baru karena ini pertama kalinya CSS memiliki sistem tata letak yang sesungguhnya.

Garis petak

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

Garis diberi nomor mulai dari 1, dengan penomoran mengikuti mode penulisan dan arah skrip komponen. Ini berarti bahwa 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.

Trek petak

{i>Track<i} adalah ruang antara dua garis grid. {i>Line track<i} berada di antara dua garis baris dan {i>column track<i} berada di antara dua garis kolom. Saat membuat petak, kita membuat jalur ini dengan menetapkan ukuran pada jalur tersebut.

Sel kisi

Sel {i>grid<i} adalah ruang terkecil pada {i>grid<i} yang ditentukan oleh persimpangan jalur baris dan kolom. Bentuknya seperti sel tabel atau sel yang ada di {i>spreadsheet<i}. Jika Anda menentukan {i>grid<i} dan tidak menempatkan item apa pun mereka akan secara otomatis ditata satu item ke dalam setiap sel {i>grid<i} yang ditentukan.

Area petak

Beberapa sel grid bersama-sama. Area petak dibuat dengan menyebabkan item membentang di beberapa trek.

Kesenjangan

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

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 {i>basic grid<i}, Anda dapat menentukan {i>grid<i} dengan tiga jalur kolom, dua trek baris dan celah 10 piksel antara trek sebagai 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 trek kolom. Setiap trek menggunakan unit durasi yang berbeda. Baris ini memiliki dua jalur baris, satu menggunakan satuan panjang dan yang lainnya otomatis. Ketika digunakan sebagai mobil, ukuran trek dapat dianggap sebesar kontennya. Secara default, ukuran trek otomatis ditentukan.

Jika elemen dengan class .container memiliki item turunan, elemen-elemen ini akan segera ditempatkan di {i>grid<i} ini. Anda dapat melihat cara kerjanya dalam demo di bawah ini.

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 dalam tab {i>Layout<i}, pilih Nomor Baris Tampilan pada menu dropdown untuk melihat nomor baris di petak Anda.

Petak yang ditandai di Chrome DevTools menunjukkan nomor baris, sel, dan jalur.

Kata kunci ukuran intrinsik

Selain dimensi panjang dan persentase seperti yang dijelaskan di bagian tentang unit ukuran, pelacakan kisi-kisi dapat menggunakan kata kunci ukuran intrinsik. Kata kunci ini ditentukan dalam spesifikasi Ukuran Kotak dan menambahkan metode tambahan untuk menentukan ukuran kotak di CSS, bukan hanya trek petak.

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

min-content akan membuat trek sekecil mungkin tanpa menampilkan konten trek yang berlebihan. Mengubah contoh tata letak petak agar memiliki tiga trek kolom dengan ukuran min-content akan membuatnya sesempit kata yang terpanjang dalam lagu.

max-content kata kunci tersebut memiliki efek yang berlawanan. 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.

fit-content() berfungsi seperti max-content pada awalnya. Namun, setelah {i>track<i} mencapai ukuran yang Anda masukkan ke dalam fungsi, konten mulai dikemas. 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 10em.

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

Catatan: Anda mungkin melihat dalam demo ini bahwa ketika mode otomatis digunakan, kolom petak akan direntangkan untuk mengisi container. Trek berukuran otomatis akan direntangkan secara default jika ada ruang tambahan dalam penampung petak.

Unit fr

Kami sudah memiliki dimensi panjang, persentase, dan juga kata kunci baru ini. Ada juga metode pengukuran khusus yang hanya berfungsi dalam tata letak petak. Ini adalah unit fr, panjang fleksibel yang menjelaskan bagian dari ruang yang tersedia di penampung petak.

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

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

Saat unit fr berbagi ruang yang tersedia, dapat digabungkan dengan gap ukuran tetap atau trek ukuran tetap. Agar komponen dengan elemen ukuran tetap dan {i>track<i} kedua menggunakan berapa pun ruang yang tersisa, yang dapat Anda gunakan sebagai daftar trek grid-template-columns: 200px 1fr.

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

Fungsi minmax()

Dukungan Browser

• 57
• 16
• 52
• 10,1

Sumber

Dengan fungsi ini, Anda dapat menetapkan ukuran minimum dan maksimum untuk sebuah trek. Hal ini dapat sangat berguna. Jika kita mengambil contoh unit fr di atas yang mendistribusikan ruang yang tersisa, dapat ditulis menggunakan minmax() sebagai minmax(auto, 1fr). {i>Grid<i} melihat ukuran intrinsik konten, kemudian mendistribusikan ruang yang tersedia setelah memberikan ruang yang cukup. Artinya, Anda mungkin tidak mendapatkan lagu yang masing-masing memiliki bagian yang sama dari semua ruang yang tersedia di penampung petak.

Untuk memaksa jalur agar mengambil bagian ruang yang sama di penampung petak dikurangi celah, gunakan minmax. Ganti 1fr sebagai ukuran trek dengan minmax(0, 1fr). Hal ini membuat ukuran minimum trek 0 dan bukan ukuran konten min. {i>Grid<i} kemudian akan mengambil semua ukuran yang tersedia dalam kontainer, kurangi ukuran yang dibutuhkan untuk celah apa pun, dan bagikan sisanya sesuai dengan unit fr Anda.

Notasi repeat()

Dukungan Browser

• 57
• 16
• 76
• 10,1

Sumber

Jika Anda ingin membuat kisi pelacakan kolom 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 bisa menulisnya 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 memiliki beberapa lagu 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 {i>track<i}, minmax(), dan ulangi, untuk membuat pola yang berguna dengan tata letak kisi. Mungkin Anda tidak ingin menentukan jumlah pelacakan kolom, tetapi ingin membuat sebanyak mungkin yang sesuai dengan container Anda.

Anda dapat mencapainya dengan kata kunci repeat() dan auto-fill atau auto-fit. Pada demo di bawah, petak akan membuat trek 200 piksel sebanyak yang akan muat dalam penampung. Buka demo di jendela baru dan lihat bagaimana perubahan petak saat Anda mengubah ukuran area pandang.

Dalam demo ini, kami mendapatkan sebanyak mungkin trek yang dapat dimuat. Namun, jalurnya tidak fleksibel. Anda akan mendapat celah di bagian akhir hingga ada cukup ruang untuk trek sepanjang 200 piksel lainnya. Jika Anda menambahkan fungsi minmax(), Anda dapat meminta trek sebanyak yang sesuai dengan ukuran minimum 200 piksel dan maksimum 1fr. Grid kemudian meletakkan trek 200 piksel dan ruang apa pun yang tersisa didistribusikan secara merata ke trek tersebut.

Cara ini menghasilkan tata letak responsif dua dimensi tanpa memerlukan kueri media apa pun.

Ada perbedaan kecil antara auto-fill dan auto-fit. Pada demo berikutnya, mainkan tata letak {i>grid<i} dengan menggunakan sintaks yang dijelaskan di atas, tetapi hanya dengan dua item petak dalam container grid. Dengan menggunakan kata kunci auto-fill, Anda dapat melihat trek kosong yang telah dibuat. Ubah kata kunci menjadi auto-fit dan trek akan diciutkan menjadi ukuran 0. Artinya, jalur fleksibel kini membesar untuk 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 grid bekerja dalam demo. Item ditempatkan di petak satu per sel sesuai urutan kemunculannya di sumber. Untuk banyak tata letak, mungkin inilah yang Anda butuhkan. Jika Anda membutuhkan lebih banyak kontrol maka ada beberapa hal yang mungkin ingin Anda lakukan. Yang pertama adalah menyesuaikan tata letak penempatan otomatis.

Menempatkan {i>item<i} 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 perlu 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 ke arah kalimat yang berjalan dalam mode penulisan dokumen atau komponen. Pada demo berikutnya, Anda dapat mengubah mode nilai grid-auto-flow dan properti writing-mode.

Spanning track

Anda dapat membuat beberapa atau semua item dalam tata letak yang ditempatkan otomatis membentang di lebih dari satu trek. Gunakan kata kunci span ditambah jumlah baris yang akan dibentangkan 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, nilai ini akan 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 mengakibatkan kisi/{i>grid<i} dengan beberapa sel yang tidak terisi. Perilaku default tata letak petak dengan tata letak yang sepenuhnya ditempatkan secara otomatis adalah untuk selalu maju. Item akan ditempatkan sesuai dengan urutannya di sumber, atau modifikasi apa pun dengan properti order. Jika tidak ada cukup ruang untuk memuat suatu item, {i>grid<i} akan meninggalkan celah dan berpindah ke trek berikutnya.

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

Meletakkan item

Anda sudah memiliki banyak fungsi dari CSS Grid. Sekarang mari kita lihat cara kita memosisikan item pada petak yang telah kita buat.

Hal pertama yang perlu diingat adalah bahwa Tata Letak Petak CSS didasarkan pada petak garis bernomor. Cara paling sederhana untuk menempatkan sesuatu ke {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 garis bernomor tersebut.

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

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

Mereka memiliki cara pintas yang memungkinkan Anda mengatur garis awal dan akhir sekaligus:

• grid-column
• grid-row

Untuk menempatkan item, tetapkan baris awal dan akhir area petak tempat item akan 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 memberikan panduan visual tentang baris untuk memeriksa tempat item Anda ditempatkan.

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

Tumpukan 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. Item yang muncul kemudian di sumber akan ditampilkan di atas item yang muncul sebelumnya. Anda dapat mengubah urutan tumpukan ini menggunakan z-index seperti halnya item yang diposisikan.

Nomor baris negatif

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

Terkadang Anda akan memiliki item yang ditampilkan di luar petak eksplisit ini. Misalnya, Anda dapat menentukan jalur kolom dan kemudian menambahkan beberapa baris item {i>grid<i} tanpa pernah menentukan jalur baris. Secara default, ukuran trek akan otomatis disesuaikan. Anda juga dapat menempatkan item menggunakan grid-column-end yang berada di luar petak eksplisit yang ditentukan. Dalam kedua kasus ini, {i>grid<i} akan membuat jalur untuk membuat tata letak berfungsi, dan jalur ini disebut sebagai petak implisit.

Seringkali tidak ada bedanya 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. Fungsi ini dapat berguna jika Anda ingin item disusun dari baris kolom pertama hingga terakhir. Dalam hal ini, Anda dapat menggunakan grid-column: 1 / -1. Item akan direntangkan ke kanan di petak eksplisit.

Namun, ini hanya berfungsi untuk petak eksplisit. Mengambil tata letak tiga baris item yang ditempatkan secara otomatis tempat Anda ingin item pertama membentang hingga garis akhir petak.

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

Mengatur ukuran trek implisit

Secara default, trek yang dibuat dalam petak implisit akan diubah ukurannya secara otomatis. 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 selebar 100 px dan 200 px. Dalam hal ini kolom implisit pertama akan berukuran 100 px, 200px kedua, 100 px ketiga, dan seterusnya.

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

Garis petak yang dinamai

Hal ini dapat mempermudah untuk menempatkan item ke dalam tata letak jika baris memiliki nama daripada angka. Anda dapat memberi nama baris apa pun di kisi-kisi Anda dengan menambahkan nama pilihan Anda di antara tanda kurung siku. Beberapa nama dapat ditambahkan, dipisahkan oleh spasi di dalam tanda kurung yang sama. Setelah Anda menamai garis, garis 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 diberi nama tersebut. Ini adalah teknik yang bagus karena memungkinkan Anda untuk melihat seperti apa tampilan komponen Anda di CSS.

Untuk memulai, beri nama turunan langsung dari penampung petak menggunakan atribut Properti grid-area:

header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.content {
    grid-area: content;
}

footer {
    grid-area: footer;
}

Namanya bisa apa saja yang Anda sukai selain kata kunci auto dan span. Setelah semua item diberi nama, gunakan grid-template-areas untuk menentukan sel petak mana yang akan direntangkan oleh setiap item. Setiap baris ditentukan dalam tanda petik.

.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 membentangkan trek, ulangi namanya.
• Area yang dibuat dengan mengulangi nama harus persegi panjang dan tidak dapat diputus.

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

Untuk meninggalkan ruang kosong di petak, gunakan . atau kelipatan tanpa ruang kosong 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 didefinisikan di satu tempat, membuatnya mudah untuk mendefinisikan ulang tata letak menggunakan kueri media. Pada contoh berikutnya, saya membuat tata letak dua kolom yang berpindah menjadi tiga kolom dengan menentukan ulang nilai grid-template-columns dan grid-template-areas. Buka contoh di jendela baru untuk bereksperimen dengan ukuran area pandang dan melihat perubahan tata letak.

Anda juga dapat melihat hubungan properti grid-template-areas dengan writing-mode dan arah, seperti halnya metode {i>grid<i} lainnya.

Properti disingkat

Ada dua properti singkat yang memungkinkan Anda mengatur banyak properti grid sekaligus. Hal ini dapat terlihat sedikit membingungkan sampai Anda menguraikan dengan tepat bagaimana mereka saling melengkapi. Terserah Anda apakah ingin menggunakannya atau lebih suka menggunakan Tangan lama.

grid-template

Dukungan Browser

• 57
• 16
• 52
• 10,1

Sumber

grid-template adalah singkatan untuk grid-template-rows, grid-template-columns, dan grid-template-areas. Baris ditentukan terlebih dahulu, bersama dengan 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

Dukungan Browser

• 57
• 16
• 52
• 10,1

Sumber

grid singkatan dapat digunakan dengan cara yang sama persis seperti singkatan grid-template. Saat digunakan dengan cara ini, properti petak lain yang diterima ke nilai awalnya akan direset. Set lengkapnya adalah:

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

Anda juga dapat menggunakan singkatan ini untuk mendefinisikan perilaku {i>grid <i}implisit, misalnya:

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

Perataan

Tata letak {i>grid<i} menggunakan properti perataan yang sama dengan yang Anda pelajari dalam panduan untuk flexbox lebih lanjut. Dalam petak, properti yang dimulai dengan justify- selalu digunakan pada sumbu inline, arah kalimat yang berjalan dalam mode penulisan Anda.

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

• justify-content dan align-content: mendistribusikan ruang tambahan dalam penampung petak di sekitar atau di antara trek.
• justify-self dan align-self: diterapkan ke item petak untuk memindahkannya di dalam area petak tempatnya berada.
• 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 diperlukan untuk menata jalur lebar tetap. Ini berarti kita memiliki ruang di dimensi inline dan blok grid. Coba nilai align-content dan justify-content yang berbeda untuk melihat perilaku trek.

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

Catatan: Seperti halnya flexbox, properti ini hanya akan berfungsi jika ada ruang tambahan untuk didistribusikan. Jika pelacakan petak Anda mengisi container dengan rapi, maka tidak akan ada ruang untuk dibagikan.

Memindahkan konten

Item dengan warna latar belakang tampak mengisi penuh area {i>grid<i} tempat mereka berada, karena nilai awal untuk justify-self dan align-self adalah stretch.

Catatan: Jika item Anda adalah gambar, atau item lain yang memiliki rasio aspek intrinsik, nilai awalnya adalah start, bukan stretch, untuk menghindari merentangkan objek.

Dalam demo, ubah nilai justify-items dan align-items untuk melihat bagaimana hal ini mengubah tata letak. Area {i>grid<i} tidak berubah ukuran, sebagai gantinya, item akan dipindahkan di dalam area yang ditentukan.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang {i>grid<i}

Manakah dari berikut ini yang merupakan istilah petak CSS?

baris

Petak tersebut dibagi dengan pemisah yang berjalan horizontal dan vertikal ini.

lingkaran

Maaf, tidak ada konsep lingkaran dalam kisi CSS.

Sel

Perpotongan tunggal baris dan kolom menghasilkan sel {i>grid<i}.

area

Beberapa sel menjadi satu.

kereta

Maaf, tidak ada konsep kereta di petak CSS.

kesenjangan

Ruang antar sel.

trek

Satu baris atau kolom adalah trek dalam petak.

main {
  display: grid;
}

Apa arah tata letak default grid?

Baris

Tanpa kolom yang ditentukan, turunan petak akan diletakkan ke arah blok seperti biasanya.

Kolom

Jika ada grid-auto-flow: column, petak akan disusun sebagai kolom.

Apa perbedaan antara auto-fit dan auto-fill?

auto-fit akan meregangkan sel agar sesuai dengan container, sedangkan auto-fill tidak.

auto-fill menempatkan sebanyak mungkin item ke dalam template, tanpa meregangkan. Fit membuat mereka pas.

auto-fit akan meregangkan container agar sesuai dengan turunan, dengan auto-fill membuat turunan sesuai dengan container.

Ini tidak sesuai dengan perilaku properti ini.

Apa itu min-content?

Sama seperti 0%

0% adalah nilai relatif kotak induk, sedangkan min-content adalah nilai relatif terhadap kata dan gambar di dalam kotak.

Huruf terkecil

Meskipun ada huruf terkecil, bukan huruf yang dimaksud min-content.

Kata atau gambar terpanjang.

Dalam frasa 'CSS is awesome', kata keren adalah min-content.

Apa itu max-content?

Kalimat terpanjang atau gambar terbesar.

Ini adalah ukuran maksimum konten kotak yang diminta atau telah ditentukan. Pola ini adalah kalimat yang paling luas atau gambar yang paling luas.

Huruf terpanjang.

Meskipun ada huruf terpanjang, max-content bukan huruf yang dimaksud.

Kata terpanjang.

Kata terpanjang adalah min-content.

Apa yang dimaksud dengan penempatan otomatis?

Saat petak mengambil item turunan dan menempatkannya dalam urutan terbaik berdasarkan heuristik browser.

Tidak ada browser yang akan mengubah urutan konten Anda, hanya gaya Anda sendiri yang akan melakukannya.

Saat item turunan petak telah diberi grid-area dan ditempatkan di sel tersebut.

Itu adalah penempatan eksplisit, bukan penempatan otomatis.

Saat belum ditetapkan, item petak akan ditempatkan berikutnya dalam template tata letak.

Item petak tanpa area eksplisit akan ditempatkan di sel petak berikutnya yang tersedia

Resource

Panduan ini berisi ringkasan tentang berbagai bagian spesifikasi tata letak petak. Untuk mengetahui lebih lanjut, lihat referensi berikut.

• Tata Letak Petak CSS MN
• Panduan Lengkap tentang Petak
• Membuat Penampung Petak
• Memeriksa petak CSS di Chrome DevTools
• Koleksi materi pembelajaran petak yang komprehensif