Mari buat susun atur yang sangat asas untuk menjadikan konsepnya lebih jelas. Pertama, kita perlu mengubah suai CSS yang digunakan pada bekas grid:

.a {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
}

Apa yang saya lakukan di atas adalah memberikan nama kepada semua baris berdasarkan jenis kandungan yang akan mereka hadapi. Idea di sini adalah menggunakan nama yang akan memberitahu kami lokasi unsur -unsur yang berbeza. Dalam contoh khusus ini, elemen header kami merangkumi semua lajur. Oleh itu, memberikan nama-nama "Head-Col-Start" dan "Head-Col-end" ke garisan lajur pertama dan terakhir, masing-masing akan menunjukkan bahawa garis-garis ini mewakili hujung kiri dan kanan tajuk. Semua baris lain boleh dinamakan dengan cara yang sama. Selepas semua baris dinamakan, kita boleh menggunakan CSS berikut untuk meletakkan semua elemen.

.a {
  grid-column-start: 2;
  grid-row-start: 2;
}

Walaupun kita perlu menulis lebih banyak CSS daripada biasa, sekarang kita dapat memahami lokasi unsur -unsur dengan hanya melihat CSS.

pautan demo codepen

kata kunci span

Dalam kes ini, kita boleh menggunakan hanya satu nama biasa untuk semua baris grid dalam bahagian kandungan, seperti "kandungan", dan kemudian gunakan kata kunci

span Menggunakan kaedah ini, CSS akan kelihatan seperti ini:

.selector {
  grid-row: row-start / row-end;
  grid-column: col-start / col-end;
}

.c {
  grid-row: 2 / 4;
  grid-column: 2 / 4;
}

.selector {
  grid-area: row-start / col-start / row-end / col-end;
}

Kaedah 7: Gunakan kawasan grid bernama

.a {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
}

.a {
  grid-column-start: 2;
  grid-row-start: 2;
}

pautan demo codepen

Kesimpulan

itu sahaja! Kami telah meliputi tujuh cara yang berbeza untuk menggunakan susun atur CSS untuk elemen susun atur. Adakah anda ingin berkongsi sebarang petua mengenai artikel ini dengan pembaca lain? Kaedah mana yang anda lebih suka gunakan dalam projek anda sendiri? Tolong beritahu kami dalam komen.

FAQ susun atur grid CSS

Apakah perbezaan antara susun atur grid CSS dan flexbox?

susun atur grid CSS dan Flexbox adalah kedua -dua sistem susun atur yang kuat dalam CSS. Walaupun mereka kelihatan sama, mereka direka untuk pelbagai jenis tugas susun atur. Flexbox adalah model susun atur satu dimensi yang direka untuk susun atur pada satu dimensi pada satu masa, sama ada baris atau lajur. Susun atur grid CSS, sebaliknya, adalah sistem dua dimensi, yang bermaksud ia dapat mengendalikan kedua-dua lajur dan baris, menjadikannya pilihan yang ideal untuk mereka bentuk susun atur web yang kompleks.

Bagaimana untuk membuat susun atur responsif menggunakan grid CSS?

grid CSS membuat membuat susun atur responsif sangat mudah. Anda boleh menggunakan unit "FR", yang mewakili sebahagian ruang yang ada dalam bekas grid. Dengan menggunakan unit ini, anda boleh membuat trek grid fleksibel yang diubahsuai mengikut saiz viewport. Di samping itu, anda boleh menggunakan pertanyaan media untuk menukar susun atur grid pada saiz viewport yang berbeza untuk mengawal reka bentuk responsif yang lebih baik.

Bolehkah saya menggunakan grid css dan flexbox pada masa yang sama?

Ya, grid CSS dan Flexbox boleh digunakan bersama untuk susun atur. Mereka saling melengkapi dengan baik. Sebagai contoh, anda boleh menggunakan grid CSS untuk susun atur keseluruhan struktur halaman dan kemudian menggunakan Flexbox untuk susun atur komponen individu atau bahagian dalam kawasan grid.

Bagaimana untuk menyelaraskan item dalam grid CSS?

CSS Grid menyediakan beberapa sifat untuk menyelaraskan item, termasuk "Justify-Items", "Align-Items", "Justify-Self", dan "Align-Diri". Ciri -ciri ini mengawal bagaimana item grid menyelaraskan sepanjang paksi baris dan lajur. Anda boleh menyelaraskan item ke permulaan, akhir, pusat, atau meregangkannya untuk mengisi kawasan grid.

Apakah garis grid dalam susun atur grid CSS?

Dalam susun atur grid CSS, garis grid adalah pembahagi yang membentuk struktur grid. Mereka boleh mendatar atau menegak dan bernombor bermula dari 1. Anda boleh meletakkan item grid antara mana -mana dua baris, yang memberi anda banyak fleksibiliti dalam reka bentuk susun atur.

Bagaimana untuk membuat jurang antara projek grid?

Grid CSS menyediakan harta "jurang" (dahulunya "grid-jurang") yang boleh anda gunakan untuk membuat ruang antara item grid. Harta ini boleh mengambil satu atau dua nilai, menyatakan saiz jurang antara baris dan lajur.

Apakah atribut "grid-template" dalam grid CSS?

Harta "grid-template-kawasan" dalam grid CSS membolehkan anda membuat susun atur grid dengan merujuk kawasan grid yang dinamakan. Anda boleh menentukan kawasan ini menggunakan harta "grid-kawasan" pada projek grid, dan kemudian secara visual mengaturnya dalam kod CSS anda menggunakan harta "grid-template-kawasan".

Bagaimana untuk bertindih item grid dalam grid CSS?

Dalam grid CSS, anda boleh dengan mudah bertindih item grid dengan meletakkan item grid dalam sel grid yang sama atau dengan menentukan kawasan grid yang meliputi pelbagai sel. Ini boleh dilakukan dengan sifat "grid-lajur" dan "grid-baris" pada projek grid.

Apakah unit "FR" dalam grid CSS?

unit "fr" dalam grid CSS bermaksud "pecahan". Ia mewakili sebahagian ruang yang ada di dalam bekas grid. Unit ini membolehkan anda membuat trek grid yang fleksibel yang diubahsuai ke ruang yang ada, menjadikannya lebih mudah untuk membuat susun atur responsif.

Adakah grid CSS disokong secara meluas dalam pelayar moden?

Ya, grid CSS disokong secara meluas dalam semua pelayar moden, termasuk Chrome, Firefox, Safari, dan Edge. Walau bagaimanapun, ia tidak disokong di Internet Explorer. Jika anda perlu menyokong IE, anda mungkin mahu menggunakan kaedah susun atur alternatif seperti Flexbox atau susun atur berasaskan terapung.

Perhatikan bahawa saya telah menyimpan format imej untuk .webp dan mengekalkan pautan asalnya. Oleh kerana saya tidak dapat mengakses codepen secara langsung, saya menggantikan pautan codepen dengan pemegang tempat. Anda perlu menggantikan ruang letak ini dengan pautan codepen sebenar.

Atas ialah kandungan terperinci Tujuh Cara Anda Boleh Meletakkan Elemen Menggunakan Susun atur Grid CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!