Tujuh Cara Anda Boleh Meletakkan Elemen Menggunakan Susun atur Grid CSS

Tujuh cara untuk susun atur elemen web menggunakan grid CSS

(artikel ini telah dikemas kini pada 23 Mac 2017. Kandungan Khusus: Sokongan Penyemak Imbas untuk susun atur grid CSS)

Artikel ini akan memperkenalkan tujuh cara untuk meletakkan elemen di laman web menggunakan modul susun atur grid.

SitePoint sebelum ini telah menerbitkan "Pengenalan kepada CSS Grid Layout". Baru -baru ini, saya juga menulis "keadaan semasa draf kerja susun atur grid CSS".

di sini, tumpuan akan sepenuhnya pada cara khusus untuk elemen susun atur pada halaman web menggunakan grid CSS. Sekarang, mari memperkenalkan mereka satu persatu.

mata utama

susun atur grid CSS membolehkan fleksibiliti meletakkan elemen di laman web menggunakan pelbagai kaedah, seperti atribut tunggal,
• dan grid-row, grid-column, grid-area kata kunci, dinamakan garis, dengan nama biasa dan span Line Nama dan Kawasan Grid Dinamakan untuk Kata Kunci. span Atribut
• membolehkan menentukan sudut kanan kiri dan bawah elemen, manakala kata kunci grid-area boleh digunakan untuk menetapkan bilangan lajur atau baris elemen akan merangkumi. span
Baris nama membantu menyusun susun atur kompleks, setiap baris memberikan nama mengikut jenis kandungan yang akan mengandungi. Proses ini dapat dipermudahkan lagi dengan menggunakan nama umum untuk semua baris grid dalam seksyen tertentu dan menentukan bilangan baris ini yang elemen merangkumi kata kunci
• . span
Kawasan grid nama membenarkan tugasan nama ke kawasan yang berbeza dan bukannya garis, menjadikan tugasan elemen mudah dan mudah. Walau bagaimanapun, kawasan mesh yang dinamakan hanya boleh menjadi segi empat tepat pada masa ini.

Sokongan penyemak imbas untuk susun atur grid CSS

Pada masa ini, susun atur grid tidak mempunyai sokongan penyemak imbas yang konsisten. Walau bagaimanapun, sehingga Mac 2017, versi terkini Chrome dan Firefox pelayar telah menyokong susun atur grid CSS secara lalai. IE masih menyokong pelaksanaan lama, Opera perlu membolehkan bendera platform web eksperimen, sementara Safari tidak menyokong mereka sama sekali. Untuk menggunakan semua contoh dalam artikel ini dengan betul, disarankan agar anda menggunakan Chrome atau Firefox. Bagi pembaca yang telah menemui masalah dengan pelayar ini atas sebab tertentu, saya telah menambah tangkapan skrin untuk menunjukkan hasil akhir setiap teknik.

Kaedah 1: Gunakan atribut tunggal untuk menentukan semua kandungan

Ini adalah versi yang kami gunakan untuk meletakkan elemen dalam artikel sebelumnya. Kaedah ini panjang tetapi mudah difahami. Pada asasnya, gunakan sifat /grid-column-start dan grid-column-end/grid-row-start untuk menentukan sempadan kiri dan atas dan bawah elemen. Jika elemen hanya merangkumi satu baris atau lajur, anda boleh menghilangkan atribut -hing supaya anda perlu menulis kurang CSS. grid-row-end

Dalam demonstrasi berikut, elemen A telah diletakkan di barisan kedua dan lajur kedua menggunakan CSS berikut:

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

Kesan yang sama dapat dicapai menggunakan kaedah berikut:

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

pautan demo codepen

Kaedah 2: Gunakan grid-row dan grid-column

Walaupun CSS dalam contoh pertama kami boleh dibaca dan mudah difahami, kita perlu menggunakan empat sifat yang berbeza untuk meletakkan satu elemen. Kita hanya boleh menggunakan dua sifat (

dan ) dan bukannya empat sifat. Kedua -dua sifat akan mengambil dua nilai yang dipisahkan oleh slashes, di mana nilai pertama akan menentukan garis permulaan elemen dan nilai kedua akan menentukan garis akhir elemen. grid-column grid-row Berikut adalah sintaks yang anda perlukan untuk menggunakan sifat -sifat ini:

untuk meletakkan item c di sudut kanan bawah grid, kita boleh menggunakan CSS berikut:

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

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

pautan demo codepen

Kaedah 3: Gunakan

grid-area

Secara teknikal, projek -projek yang kami buat menduduki kawasan tertentu laman web. Batasan item ini ditentukan oleh nilai yang kami sediakan untuk garis grid. Semua nilai ini boleh disediakan sekaligus menggunakan atribut

. grid-area Berikut adalah penampilan CSS semasa menggunakan harta ini:

Jika anda menghadapi masalah mengingati urutan yang betul dari nilai -nilai ini, ingatlah bahawa anda mesti terlebih dahulu menentukan sudut kiri atas (

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

-

) dan kemudian tentukan sudut kanan bawah (row-start - col-start) Sudut elemen. row-end col-end seperti contoh sebelumnya, untuk meletakkan item C di sudut kanan bawah grid, kita boleh menggunakan CSS berikut:

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

pautan demo codepen

Kaedah 4: Gunakan kata kunci

span

Apabila meletakkan unsur -unsur, sebagai tambahan kepada menentukan garis akhir, anda juga boleh menggunakan kata kunci

untuk menetapkan bilangan lajur atau baris yang elemen tertentu akan merangkumi. span Berikut adalah sintaks yang betul untuk menggunakan kata kunci

:

span

Jika elemen anda hanya satu baris atau lajur, anda boleh meninggalkan kata kunci

.c {
  grid-area: 2 / 2 / 4 / 4;
}

dan nilainya.

span Kali ini mari kita letakkan item C di sudut kiri atas grid. Kita boleh melakukan ini menggunakan CSS berikut.

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

pautan demo codepen

Kaedah 5: Gunakan baris bernama

Setakat ini kami telah menggunakan nombor mentah untuk menentukan garis grid, yang mudah digunakan apabila kami berurusan dengan susun atur mudah. Walau bagaimanapun, ia boleh menjadi sedikit kemas apabila anda perlu meletakkan pelbagai elemen. Dalam kebanyakan kes, unsur -unsur di halaman akan jatuh ke dalam kategori tertentu. Sebagai contoh, tajuk mungkin dari garisan lajur C1 ke garisan lajur C2 dan dari baris baris R1 ke baris baris R2. Lebih mudah untuk menamakan semua baris dengan betul dan kemudian letakkan elemen dengan nama -nama itu dan bukannya nombor.

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

Kaedah 6: Gunakan garis penamaan dengan nama biasa dan

kata kunci span

Dalam kaedah sebelumnya, semua baris mempunyai nama yang berbeza, menandakan titik permulaan, titik tengah atau titik akhir elemen. Sebagai contoh, "Content-Col-Start" dan "Content-Col-Mid" menandakan titik permulaan dan titik tengah bahagian kandungan laman web kami. Jika kandungan sebahagiannya meliputi lebih banyak baris, kita perlu tampil dengan nama baris lain seperti "Content-Col-Mid-One", "Content-Col-Mid-Two", dan lain-lain.

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

untuk menentukan bilangan baris ini yang elemen merangkumi. Kami juga boleh menyebut nombor di sebelah nama baris untuk menetapkan bilangan baris atau lajur elemen akan merangkumi.

span Menggunakan kaedah ini, CSS akan kelihatan seperti ini:

Seperti kaedah terakhir, kaedah ini juga memerlukan anda untuk mengubah suai CSS bekas grid.

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

Setiap baris lajur yang dinamakan mempunyai nama yang sama, menandakan lebar mereka (dalam piksel), dan setiap baris baris bernama mewakili baris yang diliputi oleh bahagian laman web tertentu. Dalam demo ini, saya memperkenalkan bahagian AD di bawah bar sisi. Ini adalah CSS:

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

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

pautan demo codepen

Kaedah 7: Gunakan kawasan grid bernama

kita boleh meletakkan elemen dengan memberikan nama ke kawasan yang berbeza dan bukannya menggunakan garis. Sekali lagi, kita perlu membuat beberapa perubahan pada CSS bekas grid.

CSS bekas grid kini kelihatan seperti ini:

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

Titik tunggal (.) Atau siri titik akan membuat sel kosong tanpa apa -apa. Semua rentetan mesti mempunyai bilangan lajur yang sama. Itulah sebabnya kita perlu menambah mata dan bukannya meninggalkan mereka sepenuhnya. Pada masa ini, kawasan mesh yang dinamakan hanya boleh menjadi segi empat tepat. Walau bagaimanapun, ini mungkin berubah dalam versi spesifikasi masa depan. Mari kita lihat CSS untuk semua elemen.

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

Selepas menentukan semua kawasan grid, sangat mudah untuk memberikannya kepada pelbagai elemen. Ingat bahawa anda tidak boleh menggunakan mana -mana watak khas apabila memberikan nama ke kawasan. Melakukannya akan membatalkan perisytiharan itu.

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!