Grid

The CSS Podcast - 011: Grid

Tata letak yang sangat umum dalam desain web adalah tata letak header, sidebar, isi, dan footer.

Header dengan logo dan navigasi dengan sidebar dan area konten yang menampilkan artikel

Selama bertahun-tahun, ada banyak metode untuk menyelesaikan tata letak ini, tetapi dengan petak CSS, tidak hanya relatif mudah, tetapi Anda memiliki banyak opsi. Petak sangat berguna dalam menggabungkan kontrol yang disediakan oleh ukuran eksternal dengan fleksibilitas ukuran intrinsik, yang membuatnya ideal untuk tata letak semacam ini. Hal ini karena petak adalah metode tata letak yang dirancang untuk konten dua dimensi. Artinya, menata letak item 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 menempatkannya secara otomatis ke dalam sel yang telah Anda buat. Ada banyak hal yang dapat dibuat dalam petak, tetapi dengan ringkasan tentang apa yang tersedia, Anda akan membuat tata letak petak dengan cepat.

Ringkasan

Jadi, apa yang dapat Anda lakukan dengan petak? Tata letak petak memiliki fitur berikut. Anda akan mempelajari semuanya dalam panduan ini.

  1. Petak dapat ditentukan dengan baris dan kolom. Anda dapat memilih cara menentukan ukuran jalur baris dan kolom ini atau jalur tersebut dapat bereaksi terhadap ukuran konten.
  2. Turunan langsung penampung petak akan otomatis ditempatkan ke petak ini.
  3. Atau, Anda dapat menempatkan item di lokasi yang tepat sesuai keinginan.
  4. Garis dan area pada petak dapat diberi nama untuk memudahkan penempatan.
  5. Ruang kosong di penampung petak dapat didistribusikan di antara jalur.
  6. Item petak dapat disejajarkan dalam areanya.

Terminologi petak

Petak dilengkapi dengan banyak terminologi baru karena ini adalah pertama kalinya CSS memiliki sistem tata letak yang sebenarnya.

Garis petak

Petak terdiri dari garis, yang berjalan secara horizontal dan vertikal. Jika petak Anda memiliki empat kolom, petak akan memiliki lima baris kolom termasuk baris 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 kiri ke kanan seperti bahasa Inggris, dan di sebelah kanan dalam bahasa kanan ke kiri seperti bahasa Arab.

Representasi diagram garis petak

Jalur petak

Jalur adalah ruang antara dua garis petak. Jalur baris berada di antara dua garis baris dan jalur kolom berada di antara dua garis kolom. Saat membuat petak, kita membuat jalur ini dengan menetapkan ukurannya.

Representasi diagram jalur petak

Sel kisi

Sel petak adalah ruang terkecil pada petak yang ditentukan oleh persimpangan jalur baris dan kolom. Ini seperti sel tabel atau sel dalam spreadsheet. Jika Anda menentukan petak dan tidak menempatkan item apa pun, item tersebut akan otomatis ditata satu item ke setiap sel petak yang ditentukan.

Representasi diagram sel petak

Area petak

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

Representasi diagram area petak

Kesenjangan

Parit atau lorong di antara jalur. Untuk tujuan pengukuran, jalur ini berfungsi seperti jalur reguler. Anda tidak dapat menempatkan konten ke dalam celah, tetapi Anda dapat merentangkan item petak di atasnya.

Representasi diagram petak dengan celah

Penampung petak

Elemen HTML yang telah 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, dua jalur baris, dan celah 10 piksel di antara jalur sebagai berikut.

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

Petak ini menunjukkan banyak hal yang dijelaskan di bagian terminologi. Laporan ini memiliki tiga jalur kolom. Setiap jalur menggunakan satuan panjang yang berbeda. Kolom ini memiliki dua jalur baris, satu menggunakan satuan panjang dan yang lainnya otomatis. Jika digunakan sebagai ukuran trek, otomatis dapat dianggap sama besar dengan konten. Ukuran trek ditetapkan secara otomatis secara default.

Jika elemen dengan class .container memiliki item turunan, elemen tersebut akan segera ditata di petak ini. Anda dapat melihat cara kerjanya 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 dalam tab Tata Letak, pilih Tampilkan Nomor Baris di menu drop-down untuk melihat nomor baris pada petak.

Seperti yang dijelaskan dalam teks dan petunjuk
Petak yang ditandai di Chrome DevTools yang menampilkan nomor baris, sel, dan jalur.

Kata kunci ukuran intrinsik

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

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

Kata kunci min-content akan membuat trek sekecil mungkin tanpa konten trek yang meluap. Mengubah contoh tata letak petak agar memiliki tiga jalur kolom dengan ukuran min-content akan membuatnya menjadi sempit seperti kata terpanjang di jalur.

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

Fungsi fit-content() berperilaku 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 10em, jika ukuran max-content kurang dari 10em, tetapi tidak pernah lebih besar dari 10em.

Dalam demo berikutnya, coba berbagai kata kunci ukuran intrinsik dengan mengubah ukuran jalur petak.

Unit fr

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

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

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

Karena unit fr membagi ruang yang tersedia, unit ini dapat digabungkan dengan celah ukuran tetap atau jalur ukuran tetap. Untuk memiliki komponen dengan elemen ukuran tetap dan jalur kedua yang menggunakan ruang yang tersisa, Anda dapat menggunakannya sebagai daftar lagu 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. Dalam demo di bawah, ubah nilai jalur ketiga.

Fungsi minmax()

Browser Support

  • Chrome: 57.
  • Edge: 16.
  • Firefox: 52.
  • Safari: 10.1.

Source

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

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

Notasi repeat()

Browser Support

  • Chrome: 57.
  • Edge: 16.
  • Firefox: 76.
  • Safari: 10.1.

Source

Jika ingin membuat petak jalur 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 menulisnya menggunakan repeat():

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

Fungsi repeat() dapat digunakan untuk mengulangi bagian daftar lagu apa pun. Misalnya, Anda dapat mengulangi pola trek. Anda juga dapat memiliki 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 ulangi, untuk membuat pola yang berguna dengan tata letak petak. Mungkin Anda tidak ingin menentukan jumlah jalur kolom, tetapi ingin membuat sebanyak yang muat di penampung.

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

Dalam demo, kita mendapatkan sebanyak mungkin jalur yang sesuai. Namun, jalurnya tidak fleksibel. Anda akan mendapatkan celah di bagian akhir hingga ada cukup ruang untuk jalur 200 piksel lainnya. Jika menambahkan fungsi minmax(), Anda dapat meminta sebanyak mungkin jalur yang sesuai dengan ukuran minimum 200 piksel dan maksimum 1fr. Petak kemudian menata jalur 200 piksel dan ruang yang tersisa akan didistribusikan secara merata ke jalur tersebut.

Tindakan ini akan membuat tata letak responsif dua dimensi tanpa memerlukan kueri media.

Ada perbedaan kecil antara auto-fill dan auto-fit. Dalam demo berikutnya, mainkan dengan tata letak petak menggunakan sintaksis yang dijelaskan di atas, tetapi hanya dengan dua item petak di 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 ke ukuran 0. Artinya, jalur fleksibel kini bertambah untuk menggunakan ruang.

Kata kunci auto-fill dan auto-fit akan berperilaku sama persis. Tidak ada perbedaan di antara keduanya setelah jalur pertama terisi.

Penempatan otomatis

Anda telah melihat cara kerja penempatan otomatis petak dalam demo sejauh ini. Item ditempatkan di petak satu per sel sesuai urutan kemunculan di sumber. Untuk banyak tata letak, Anda mungkin hanya memerlukan ini. Jika Anda memerlukan lebih banyak kontrol, 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 menyebabkan 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 ini terkait dengan mode penulisan dokumen. Baris selalu berjalan ke arah kalimat berjalan dalam mode penulisan dokumen atau komponen. Dalam demo berikutnya, Anda dapat mengubah mode nilai grid-auto-flow dan properti writing-mode.

Jalur yang membentang

Anda dapat menyebabkan beberapa atau semua item dalam tata letak yang ditempatkan secara otomatis untuk menjangkau lebih dari satu jalur. 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 awal auto akan digunakan 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 kesenjangan

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

Demo berikutnya menunjukkan perilaku ini. Kotak centang akan menerapkan mode pengepakan rapat. Hal ini diaktifkan dengan memberikan nilai dense ke grid-auto-flow. Dengan nilai ini, petak akan mengambil item nanti dalam tata letak dan menggunakannya untuk mengisi celah. Hal ini mungkin berarti bahwa tampilan terputus dari urutan logis.

Menempatkan item

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

Hal pertama yang perlu diingat adalah bahwa Tata Letak Petak CSS didasarkan pada petak garis yang diberi nomor. Cara paling sederhana untuk menempatkan item ke petak 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:

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

Untuk menempatkan item, tetapkan garis 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 memberi Anda panduan visual untuk garis guna 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 cara teks mengalir.

Menumpuk item

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

Nomor baris negatif

Saat membuat petak menggunakan grid-template-rows dan grid-template-columns, Anda membuat apa yang dikenal sebagai petak eksplisit. Ini adalah petak yang telah Anda tentukan dan memberikan ukuran ke jalur.

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 menentukan jalur baris. Jalur akan otomatis diubah ukurannya 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.

Sebagian besar waktu, tidak akan ada perbedaan jika Anda menggunakan petak implisit atau eksplisit. Namun, dengan penempatan berbasis baris, Anda mungkin mengalami perbedaan utama antara keduanya.

Dengan menggunakan nomor baris negatif, Anda dapat menempatkan item dari baris akhir petak eksplisit. Hal ini dapat berguna jika Anda ingin item membentang 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 secara otomatis tempat Anda ingin item pertama membentang ke baris akhir petak.

Sidebar dengan 8 item petak yang bersaudara

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

Menentukan ukuran jalur implisit

Jalur yang dibuat dalam petak implisit akan otomatis 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 jalur selebar 100 px dan 200 px. Dalam hal ini, kolom implisit pertama akan berukuran 100 piksel, kolom kedua 200 piksel, kolom ketiga 100 piksel, dan seterusnya.

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

Garis petak yang diberi nama

Hal ini dapat mempermudah penempatan item ke dalam tata letak jika baris memiliki nama, bukan angka. Anda dapat memberi nama baris apa pun di petak dengan menambahkan nama pilihan Anda di antara tanda kurung siku. Beberapa nama dapat ditambahkan, dipisahkan dengan spasi di dalam tanda kurung yang sama. Setelah Anda memberi nama garis, nama tersebut dapat digunakan, bukan 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 melihat tampilan komponen di CSS.

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

header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.content {
    grid-area: content;
}

footer {
    grid-area: footer;
}

Nama dapat 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 dijangkau 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 merentangkan jalur, ulangi namanya.
  • Area yang dibuat dengan mengulangi nama harus berbentuk persegi panjang dan tidak dapat terputus.

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

Untuk menyisakan ruang kosong pada petak, gunakan . atau kelipatan tanpa spasi kosong di antaranya. Misalnya, untuk mengosongkan sel pertama di petak, 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 bermain 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 petak lainnya.

Properti disingkat

Ada dua properti singkat yang memungkinkan Anda menetapkan banyak properti petak sekaligus. Hal ini mungkin terlihat sedikit membingungkan hingga Anda menguraikan dengan tepat cara properti tersebut digabungkan. Anda dapat menggunakan atau memilih untuk menggunakan longhand.

grid-template

Browser Support

  • Chrome: 57.
  • Edge: 16.
  • Firefox: 52.
  • Safari: 10.1.

Source

Properti 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

Browser Support

  • Chrome: 57.
  • Edge: 16.
  • Firefox: 52.
  • Safari: 10.1.

Source

Singkatan grid dapat digunakan dengan cara yang sama persis dengan singkatan grid-template. Jika digunakan dengan cara ini, properti petak lain yang diterima akan direset ke nilai awalnya. Kumpulan 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 inline, arah kalimat berjalan dalam mode penulisan Anda.

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

Mendistribusikan ruang ekstra

Dalam demo ini, petak lebih besar dari ruang yang diperlukan untuk menata letak jalur lebar tetap. Artinya, kita memiliki ruang di dimensi inline dan blok petak. Coba nilai align-content dan justify-content yang berbeda untuk melihat perilaku jalur.

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

Memindahkan konten

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

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

Memeriksa pemahaman Anda

Uji pengetahuan Anda tentang petak

Manakah dari opsi berikut yang merupakan istilah petak CSS?

baris
Petak dibagi oleh pemisah yang berjalan secara horizontal dan vertikal.
lingkaran
Maaf, tidak ada konsep lingkaran di petak CSS.
sel
Satu persimpangan baris dan kolom akan membuat sel petak.
area
Beberapa sel bersama-sama.
kereta
Maaf, tidak ada konsep kereta di petak CSS.
kesenjangan
Ruang antara sel.
trek
Satu baris atau kolom adalah jalur di petak.
 
main {
  display: grid;
}

Apa arah tata letak default petak?

Baris
Tanpa kolom yang ditentukan, turunan petak akan disusun dalam arah blok seperti biasa.
Kolom
Jika grid-auto-flow: column ada, petak akan ditata sebagai kolom.

Apa perbedaan antara auto-fit dan auto-fill?

auto-fit akan meregangkan sel agar sesuai dengan penampung, sedangkan auto-fill tidak akan melakukannya.
auto-fill menempatkan sebanyak mungkin item ke dalam template, tanpa meregangkan. Fit membuat mereka cocok.
auto-fit akan meregangkan penampung agar sesuai dengan turunan, sedangkan auto-fill membuat turunan sesuai dengan penampung.
Ini bukan perilaku properti ini.

Apa itu min-content?

Sama dengan 0%
0% adalah nilai relatif kotak induk, sedangkan min-content relatif terhadap kata dan gambar dalam kotak.
Huruf terkecil
Meskipun ada huruf terkecil, huruf bukanlah yang dimaksud min-content.
Kata atau gambar terpanjang.
Dalam frasa 'CSS is awesome', kata awesome adalah min-content.

Apa itu max-content?

Kalimat terpanjang atau gambar terbesar.
Ini adalah ukuran maksimum yang diminta atau ditentukan oleh konten kotak. Ini adalah kalimat atau gambar dalam ukuran lebar maksimal.
Huruf terpanjang.
Meskipun ada huruf terpanjang, huruf bukanlah yang dimaksud max-content.
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.
Penempatan tersebut adalah penempatan eksplisit, bukan penempatan otomatis.
Saat item petak yang tidak ditetapkan ditempatkan di samping dalam template tata letak.
Item petak tanpa area eksplisit akan ditempatkan di sel petak berikutnya yang tersedia

Resource

Panduan ini telah memberi Anda ringkasan tentang berbagai bagian spesifikasi tata letak petak. Untuk mengetahui informasi selengkapnya, lihat referensi berikut.