Panduan pemula ' s ke susun atur grid CSS

Modul susun atur grid CSS telah merevolusikan cara laman web dibina. Ia menawarkan alat yang membolehkan susun atur lanjutan tanpa hacks rumit dan penyelesaian inventif masa lalu.

Dalam pengenalan ini kepada grid, kami akan berjalan melalui asas -asas bagaimana susun atur grid berfungsi, dan kami akan melihat banyak contoh mudah bagaimana menggunakannya dalam amalan.

Takeaways Key

1. Pengenalan kepada susun atur grid CSS: Artikel ini memberikan pemahaman asas mengenai grid CSS sebagai sistem susun atur yang kuat dalam CSS, menjelaskan cara mengubah unsur -unsur menjadi rangka grid baris dan lajur untuk penempatan kandungan berstruktur. Ia meliputi asas -asas menjadikan elemen menjadi bekas grid dan anak -anak langsung ke dalam item grid.

2. Struktur grid dan penempatan item: Ciri-ciri penting dari grid CSS diterokai, termasuk menentukan struktur grid menggunakan sifat-sifat seperti grid-templat-lajur, grid template-baris, dan grid template-areas. Tutorial menunjukkan item grid jarak dengan harta jurang dan menganjurkannya ke dalam baris dan lajur tertentu untuk susun atur yang tepat.

3. Reka bentuk responsif dengan grid CSS: Kesesuaian grid CSS untuk reka bentuk web responsif diserlahkan, mempamerkan bagaimana pertanyaan media boleh digunakan untuk mengubah susun atur grid untuk saiz skrin yang berbeza. Teknik lanjutan seperti item grid bertindih dan membuat susun atur responsif tanpa pertanyaan media juga dibincangkan, menekankan fleksibiliti grid CSS dalam reka bentuk web moden.

Bermula dengan susun atur grid

Grid adalah rangka kerja lajur dan baris ke mana kita boleh meletakkan kandungan. (Ia agak seperti susun atur meja, tetapi pada steroid!)

Bermula dengan grid semudah melakukan ini:

<span><span>.container</span> {
</span>  <span>display: grid;
</span><span>}
</span>

Sekarang, semua kanak -kanak langsung dari elemen .container akan menjadi "item grid". Untuk bermula dengan, mereka hanya akan muncul sebagai sekumpulan baris dalam satu lajur, seperti yang ditunjukkan dalam demo di bawah.

Lihat Pen

Asas Grid CSS: Paparan: Grid oleh SitePoint (@SitePoint)
pada codepen.

Dalam contoh di atas, kita mempunyai elemen

yang bertindak sebagai bekas. Di dalamnya kita mempunyai beberapa elemen, yang kini menjadi item grid:

Setakat ini, kita belum mencapai banyak, kerana kita akan mendapat hasil yang sama tanpa paparan: grid.

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span>></span>header<span><span></header</span>></span>
</span>  <span><span><span><aside</span>></span>aside<span><span></aside</span>></span>
</span>  <span><span><span><main</span>></span>main<span><span></main</span>></span>
</span>  <span><span><span><footer</span>></span>footer<span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

Bacaan Lanjut:

Dalam demo di atas, bekas itu berpusat di viewport. Baca lebih lanjut mengenai elemen berpusat dengan grid.

• menetapkan jurang antara item grid

mari kita ruang pertama div kami sedikit dengan harta jurang:

<span><span>.container</span> {
</span>  <span>display: grid;
</span><span>}
</span>

Lihat Pen
Asas Grid CSS: Gap oleh SitePoint (@SitePoint)
pada codepen.

Harta jurang memasukkan ruang antara unsur -unsur secara menegak dan mendatar, seperti yang akan kita lihat tidak lama lagi. (Kita boleh menetapkan jurang mendatar dan menegak yang berbeza jika kita perlu.)

Bacaan Lanjut:

Baca lebih lanjut mengenai harta jurang.

Menyediakan Lajur Grid

Pada masa ini, kami mempunyai grid "tersirat" - yang bermaksud bahawa penyemak imbas hanya memikirkan grid untuk dirinya sendiri, kerana kami belum menentukan sebarang baris atau lajur lagi. Secara lalai, kami hanya mendapat satu lajur dan empat baris - satu untuk setiap item grid. Mari kita tentukan beberapa lajur:

Dengan grid-templat-lajur, kami menyatakan bahawa kami mahu empat lajur masing-masing dengan lebar 1FR, atau satu pecahan ruang yang ada. (Bukannya 1FR 1FR 1FR 1FR kita boleh menulis ulang (4, 1fr) menggunakan fungsi berulang () yang sangat berguna.)

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span>></span>header<span><span></header</span>></span>
</span>  <span><span><span><aside</span>></span>aside<span><span></aside</span>></span>
</span>  <span><span><span><main</span>></span>main<span><span></main</span>></span>
</span>  <span><span><span><footer</span>></span>footer<span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

Sekarang item grid kami dibentangkan dalam satu baris, seperti yang ditunjukkan di bawah.

Lihat Pen

Asas Grid CSS: Grid-Template-Columns oleh SitePoint (@SitePoint)

pada codepen.

Bacaan Lanjut:

Maklumat lanjut mengenai grid-templat-lajur.

Ketahui lebih lanjut mengenai unit panjang fleksibel (FR).

• Cara menggunakan fungsi berulang () grid.
menganjurkan item grid ke dalam baris dan lajur
Sekarang mari kita menyusun item grid kami ke dalam baris dan lajur, seperti yang kita dapat melihatnya pada susun atur laman web standard.

Pertama, kami akan menentukan tiga baris dengan harta tanah-template-baris:

Jika kita menambah garis itu ke pen di atas, tidak banyak yang akan berlaku lagi, kerana kita belum menentukan bagaimana kita mahu item grid kita sesuai dengan baris dan lajur ini. (Sekali lagi ambil perhatian bahawa auto auto auto boleh ditulis sebagai ulangan (3, auto) menggunakan fungsi ulang ().)

Bacaan Lanjut:

<span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>gap: 10px;
</span><span>}
</span>

Maklumat lanjut mengenai grid-template-baris.

Cara menggunakan fungsi berulang () grid.

• meletakkan item grid pada grid
• Alat pemaju penyemak imbas kami sangat berguna untuk memahami susun atur grid CSS. Jika kita memeriksa kod kita setakat ini, kita dapat melihat garis grid mendatar dan menegak yang menentukan grid kita, seperti yang digambarkan di bawah.

Terdapat lima garisan grid menegak dan empat garisan grid mendatar, semuanya bernombor. Kita boleh menggunakan garisan grid ini untuk menentukan bagaimana kita mahu item grid kita dibentangkan.

mari kita tetapkan pertama

elemen untuk merangkumi empat lajur dan satu baris:

<span><span>.container</span> {
</span>  <span>display: grid;
</span><span>}
</span>

Ini memberitahu

untuk memulakan pada garisan lajur grid bernombor 1 dan berakhir pada baris lajur yang bernombor 5. Ia juga memberitahu

untuk bermula pada baris baris grid pertama. Kerana garis akhir tidak ditentukan, ia hanya menjangkau ke baris baris seterusnya, jadi grid-baris: 1 bersamaan dengan grid-baris: 1/2 2.

mari kita buat sesuatu yang serupa dengan

:

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span>></span>header<span><span></header</span>></span>
</span>  <span><span><span><aside</span>></span>aside<span><span></aside</span>></span>
</span>  <span><span><span><main</span>></span>main<span><span></main</span>></span>
</span>  <span><span><span><footer</span>></span>footer<span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

satu -satunya perbezaan di sini ialah kami telah menetapkan

untuk duduk di antara garis baris grid 3 dan 4.

Sekarang mari kita meletakkan unsur -unsur dan :

<span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>gap: 10px;
</span><span>}
</span>

Hasilnya ditunjukkan dalam pen di bawah.

lihat pen
asas grid CSS: meletakkan item dengan garisan bernombor oleh SitePoint (@SitePoint)
pada codepen.

Kami kini mempunyai susun atur yang fleksibel dan responsif tanpa terapung, limpahan dan mimpi buruk yang lain. Jika kami menambah kandungan ke item grid kami, mereka akan berkembang untuk mengandungi kandungan itu, dan lajur bersebelahan akan sentiasa mempunyai ketinggian yang sama. (Bagi mereka yang bekerja dengan CSS dalam Noughties, mencapai lajur yang sama ketinggian adalah mimpi ngeri!)

perkara yang berguna untuk mengetahui mengenai garisan grid bernombor

Jika anda melihat semula imej di atas, anda akan melihat bahawa, di sepanjang bahagian bawah, garis menegak juga dinamakan dengan nombor negatif. Setiap garis grid mempunyai nombor positif dan negatif. Ini mempunyai banyak kegunaan, seperti ketika terdapat banyak garisan grid dan kita tidak semestinya tahu berapa banyak yang akan ada. Kami boleh menetapkan elemen kami untuk merangkumi semua lima lajur dengan grid -lajur: 1 / -1, kerana garis menegak terakhir bernombor kedua -dua 5 dan -1.

Grid juga mempunyai kata kunci span, yang boleh kita gunakan untuk memberitahu elemen untuk merangkumi beberapa baris atau lajur. Satu lagi pilihan untuk susun atur

kami adalah untuk menulis grid-lajur: 1 / span 4. Ini memberitahu elemen untuk bermula pada garis grid pertama dan merangkumi semua empat lajur kami.

Cuba variasi ini dalam pen di atas.

Bacaan Lanjut:

• Ketahui lebih lanjut mengenai garis grid.
• Arah di mana garisan grid bernombor dipengaruhi oleh mod penulisan susun atur kami.
• Ketahui lebih lanjut mengenai grid-kolumn.
• baca mengenai kata kunci span dalam spesifikasi grid.

meletakkan item grid menggunakan garisan grid bernama

Kami telah melihat bagaimana untuk mengatur unsur -unsur di grid menggunakan garisan grid bernombor. Tetapi kita juga boleh memberikan nama kepada beberapa atau semua garisan grid kita dan merujuknya - yang boleh menjadi lebih intuitif dan menyelamatkan kita daripada mengira garis grid.

mari kita mengemas kini susun atur kami untuk memasukkan beberapa baris bernama:

<span><span>.container</span> {
</span>  <span>display: grid;
</span><span>}
</span>

Dalam kod di atas, kami telah menamakan hanya tiga garisan grid menegak. Nama -nama itu masuk dalam kurungan persegi di sebelah lebar lajur kami, mewakili garis lajur kami.

sekarang kita boleh meletakkan beberapa elemen kami di grid seperti:

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span>></span>header<span><span></header</span>></span>
</span>  <span><span><span><aside</span>></span>aside<span><span></aside</span>></span>
</span>  <span><span><span><main</span>></span>main<span><span></main</span>></span>
</span>  <span><span><span><footer</span>></span>footer<span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

kita dapat melihat kod ini dalam amalan dalam demo di bawah.

Lihat pen
asas grid CSS: meletakkan item dengan garis yang dinamakan oleh SitePoint (@SitePoint)
pada codepen.

Bacaan Lanjut:

Ketahui lebih lanjut mengenai garis grid yang dinamakan.

• baca mengenai baris bernama dalam spesifikasi grid.
meletakkan item grid menggunakan kawasan grid bernama

Salah satu ciri susun atur grid yang paling menarik dan "pereka" adalah keupayaan untuk menamakan kawasan grid-iaitu, satu atau lebih sel dalam grid-dengan cara yang mudah dan intuitif, dan kemudian gunakan nama tersebut untuk Letakkan item grid kami. Ia berfungsi seperti ini:

Menggunakan grid-templat-kawasan, kami telah membuat grid teks mudah yang menyatakan bagaimana kami mahu unsur-unsur yang dibentangkan. Sekarang kita hanya perlu menggunakan nama -nama kawasan ini kepada unsur -unsur kita:

<span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>gap: 10px;
</span><span>}
</span>

Jadi, akan merangkumi semua empat lajur, elemen hanya akan duduk di lajur pertama baris kedua, dan sebagainya.

<span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>gap: 10px;
</span>  <span>grid-template-columns: 1fr 1fr 1fr 1fr;
</span><span>}
</span>

kita dapat melihat ini dalam tindakan di pena di bawah.

lihat pen

asas grid css: meletakkan item menggunakan kawasan nama oleh sitepoint (@sitePoint)

pada codepen.

Kod ini lebih mudah daripada apa yang telah kami lakukan sebelum ini - sama ada menggunakan baris bernombor atau bernama. Menggunakan kawasan grid yang dinamakan seperti ini hampir memalukan mudah - seperti menggunakan editor WYSIWYG dan bukannya menulis kod sebenar. Tetapi yakinlah, ia tidak menipu! Ia hanya super sejuk.

menggunakan nombor baris dan dinamakan garis dengan kawasan grid

Perlu diperhatikan bahawa kita juga boleh menggunakan nombor baris dan/atau dinamakan garis untuk menentukan kawasan grid. Sebagai contoh, bukannya menggunakan harta tanah grid-template, kita hanya boleh melakukan sesuatu seperti ini:

<span><span>.container</span> {
</span>  <span>display: grid;
</span><span>}
</span>

Corak adalah baris-permulaan / lajur-permulaan / baris-end / lajur-end. Anda boleh menyemak demo ini di Codepen . Secara peribadi, saya merasa sangat sukar untuk mengingati corak baris dan lajur ini, tetapi perkara yang hebat tentang grid adalah bahawa terdapat banyak cara untuk melakukan perkara yang sama.

menukar susun atur item grid

Pada hari -hari lama, jika kami memutuskan pada satu ketika untuk menukar susun atur elemen halaman kami, ia mungkin akan membawa kepada banyak refactoring kod. Sebagai contoh, bagaimana jika kita mahu melanjutkan elemen hingga akhir susun atur? Dengan kawasan grid, ia sangat mudah. Kita boleh melakukan ini:

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span>></span>header<span><span></header</span>></span>
</span>  <span><span><span><aside</span>></span>aside<span><span></aside</span>></span>
</span>  <span><span><span><main</span>></span>main<span><span></main</span>></span>
</span>  <span><span><span><footer</span>></span>footer<span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

kami baru saja mengeluarkan sel grid dari footer dan menugaskannya untuk mengetepikan, yang membawa kepada apa yang kita lihat di pena di bawah.

Lihat Pen

Asas Grid CSS: Menempatkan Item Menggunakan Kawasan Dinamakan 2 oleh SitePoint (@SitePoint)
pada codepen.

kita mungkin memutuskan bahawa kita mahu sel kosong di suatu tempat. Kami berbuat demikian dengan hanya menggunakan satu atau lebih tempoh, seperti itu:

lihat jika anda dapat meramalkan hasilnya, dan kemudian periksa demo codepen ini.

<span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>gap: 10px;
</span><span>}
</span>

Bacaan Lanjut:

Ketahui lebih lanjut mengenai grid-template-areas.

Ketahui lebih lanjut mengenai harta tanah grid.
• menggunakan pertanyaan media dengan susun atur grid

Kami sering menginginkan susun atur yang berbeza pada skrin kecil - seperti menyusun elemen grid kami dalam satu lajur. Cara mudah untuk melakukan ini adalah untuk menyusun semula kawasan grid kami melalui pertanyaan media:

kami kini telah menetapkan hanya satu lajur, dan tetapkan urutan unsur -unsur dalam lajur itu.

<span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>gap: 10px;
</span>  <span>grid-template-columns: 1fr 1fr 1fr 1fr;
</span><span>}
</span>

Lihat Pen

Asas Grid CSS: Menggunakan Pertanyaan Media oleh SitePoint (@SitePoint)

pada codepen.

Tekan butang 0.5x di bahagian bawah pen di atas untuk melihat bagaimana susun atur bertindak balas (atau lihat pena pada codepen dan melebarkan dan sempit viewport).

menukar pesanan paparan item grid

Kami berada di titik yang baik sekarang untuk melihat betapa mudahnya untuk menukar urutan paparan elemen dalam susun atur grid. Dalam contoh di atas, urutan sumber kami adalah , , dan , tetapi dalam pertanyaan media kami, kami telah menetapkan elemen untuk muncul di atas elemen . Ia mudah untuk menukar sekitar urutan paparan elemen dengan grid! Kami juga boleh membalikkan urutan paparan semuanya.

kita boleh menyusun semula elemen grid walaupun tidak menggunakan elemen bernama. Secara lalai, item grid diletakkan mengikut urutan sumber HTML mereka. Mereka juga mempunyai urutan lalai 0. Kita boleh menggunakan harta pesanan ini untuk mengubah susunan visual elemen. Semakin rendah nilai pesanan, semakin cepat elemen muncul. Malah bilangan bulat negatif boleh digunakan, jadi jika elemen kami mempunyai perintah -1, ia akan muncul terlebih dahulu.

Untuk memerintahkan unsur -unsur kami seperti yang ditunjukkan di atas, kami dapat menetapkan nilai pesanan , dan hingga 1, 2 dan 3 masing -masing. (Lihat pen ini untuk demo langsung.)

Kata -kata berhati -hati, walaupun: unsur -unsur yang disusun semula boleh menjadi mimpi ngeri untuk kebolehcapaian, dengan tumpuan melompat di sekitar skrin tidak dapat diramalkan, jadi gunakannya dengan berhati -hati.

Bacaan Lanjut:

Spesifikasi rasmi untuk harta pesanan.
harta pesanan yang dijelaskan pada MDN, termasuk seksyen mengenai kebimbangan aksesibiliti.

susun atur grid responsif tanpa pertanyaan media

kita melihat di atas bahawa kita boleh membuat susun atur kita responsif kepada saiz skrin yang berbeza. Pertama, dengan menetapkan lebar lajur ke unit fleksibel seperti FR, susun atur boleh tumbuh dan mengecut seperti yang diperlukan. Kedua, kita boleh menggunakan pertanyaan media untuk menyusun semula susun atur pada titik putus tertentu.

susun atur grid mempunyai alat yang membolehkan susun atur reflow tanpa menggunakan pertanyaan media. Walau bagaimanapun, kami tidak dapat mencapai ini dengan susun atur yang kami bekerjasama di atas. Ia hanya berfungsi untuk susun atur yang lebih mudah di mana setiap lajur berkongsi lebar yang sama.

Pertimbangkan html berikut:

<span><span>.container</span> {
</span>  <span>display: grid;
</span><span>}
</span>

mari duduk divs divs bersebelahan di skrin lebar, dan tumpukan pada skrin kecil:

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span>></span>header<span><span></header</span>></span>
</span>  <span><span><span><aside</span>></span>aside<span><span></aside</span>></span>
</span>  <span><span><span><main</span>></span>main<span><span></main</span>></span>
</span>  <span><span><span><footer</span>></span>footer<span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

anda dapat melihat hasil pena di bawah.

Lihat Pen

Asas Grid CSS: Grid Responsif Tanpa Pertanyaan Media oleh SitePoint (@SitePoint)
pada codepen.

(sekali lagi, tekan butang 0.5x di bahagian bawah pen di atas untuk melihat bagaimana susun atur bertindak balas.)

Kod itu sedikit lebih maju, dan kami menerangkannya secara terperinci mengenai cara menggunakan fungsi CSS Grid Repeat (). Tujuan utama menunjukkannya di sini adalah untuk memberi gambaran tentang apa yang mungkin dengan susun atur grid.

Bacaan Lanjut:

• Baca lebih lanjut mengenai kata kunci auto-fit.
• Baca lebih lanjut mengenai menggunakan fungsi Minmax () dengan fungsi min ().

elemen bertindih dalam grid

Sebaik sahaja kami telah membuat susun atur grid, kami boleh melakukan lebih daripada sekadar memperuntukkan setiap item grid ke kawasan grid yang berasingan. Kita boleh dengan mudah menetapkan item grid untuk berkongsi kawasan grid yang sama, sebahagian atau sepenuhnya. Ini membolehkan kita membuat susun atur yang cantik dan kreatif - dengan unsur -unsur bertindih, dan tanpa sebarang kod rumit.

Mari buat grid mudah yang mengandungi imej dan beberapa teks yang sebahagiannya meliputi imej. Inilah HTML:

<span><span>.container</span> {
</span>  <span>display: grid;
</span><span>}
</span>

Sekarang kita akan menetapkan beberapa baris dan lajur yang sebahagiannya dikongsi antara div dan imej:

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span>></span>header<span><span></header</span>></span>
</span>  <span><span><span><aside</span>></span>aside<span><span></aside</span>></span>
</span>  <span><span><span><main</span>></span>main<span><span></main</span>></span>
</span>  <span><span><span><footer</span>></span>footer<span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

Hasilnya ditunjukkan dalam demo codepen berikut.

Lihat pen
asas grid CSS: unsur grid berlapis oleh sitepoint (@sitePoint)
pada codepen.

Div muncul di atas imej hanya kerana ia datang selepas imej dalam urutan sumber. Kita boleh mengubah elemen mana yang muncul di atas yang lain dengan menggunakan indeks Z. Sebagai contoh, cuba tetapkan indeks Z 2 ke imej dalam pen di atas; Ia kini akan meliputi sebahagian daripada div.

Bacaan Lanjut:

Untuk memahami kedudukan imej dalam demo di atas, lihat cara menggunakan objek CSS-Fit dan Objek-Objek.

• Ketahui lebih lanjut mengenai harta z-indeks.
membungkus

Artikel ini dimaksudkan sebagai pengenalan asas kepada susun atur grid CSS. Harapannya ialah ia akan menyediakan batu loncatan untuk pembelajaran dan penemuan selanjutnya. Dan ada jumlah

besar

yang boleh anda pelajari mengenai grid. grid vs flexbox

Persoalan abadi adalah sama ada kita harus menggunakan grid atau flexbox. Memang benar terdapat beberapa pertindihan antara apa yang boleh dilakukan oleh kedua -dua alat susun atur ini. Sering kali, di mana terdapat pertindihan, ia patut melakukan beberapa ujian untuk melihat yang mempunyai toolkit yang lebih baik dalam setiap senario tertentu.

sebagai peraturan umum, ingatlah ini:

Flexbox terutamanya direka untuk meletakkan unsur -unsur dalam satu arah (walaupun elemen -elemen itu membungkus garis).

• Grid direka untuk meletakkan unsur -unsur dalam dua arah, supaya mereka diselaraskan secara mendatar dan menegak.
Atas sebab ini, grid biasanya merupakan pilihan yang lebih baik untuk susun atur keseluruhan halaman, sementara Flexbox lebih baik untuk meletakkan perkara seperti menu.

Untuk perbandingan lebih mendalam grid dan flexbox, lihat Flexbox atau CSS Grid? Bagaimana membuat keputusan susun atur yang masuk akal.

sokongan penyemak imbas untuk grid

Apabila kami mula -mula menerbitkan artikel ini - kembali pada tahun 2016 - Grid agak baru kepada pelayar, dan sokongan tidak universal. Pada masa kini, semua penyemak imbas utama menyokong grid. Masih terdapat beberapa pelayar yang lebih tua yang terapung di sekitar yang tidak menyokongnya, tetapi dalam banyak kes, pelayar tersebut masih akan memaparkan kandungan dengan cukup baik. Satu pendekatan tangkapan yang bagus adalah bermula dengan susun atur tunggal untuk peranti mudah alih yang boleh berfungsi sebagai sandaran untuk penyemak imbas yang tidak menyokong susun atur grid. Gaya grid boleh ditambah melalui pertanyaan media untuk penyemak imbas yang menyokong mereka - untuk dipaparkan pada skrin yang lebih luas.

anda boleh menyemak sokongan penyemak imbas terkini untuk grid di CANIUSE.

sumber pembelajaran untuk grid

Akhirnya, mari kita berakhir dengan beberapa sumber pembelajaran selanjutnya. Banyak orang yang menakjubkan telah menyediakan tutorial, video, buku dan banyak lagi di grid. Berikut hanya beberapa:

• CSS Master, edisi ke-3 , oleh Tiffany Brown, adalah pengenalan hebat kepada CSS, dengan panduan yang mendalam tentang cara menggunakan grid dan kaedah susun atur lain.
• rujukan grid MDN.
• grid oleh tapak contoh Rachel Andrew. (Sebenarnya, Rachel Andrew mempunyai banyak artikel yang luar biasa, tutorial, video dan juga sebuah buku mengenai susun atur grid, dan merupakan pakar utama. >
Siri YouTube Lands Land oleh Jen Simmons. (Jen adalah nama lain yang bernilai googling.)
Kevin Powell membentangkan banyak tutorial grid yang hebat di YouTube yang patut diperiksa.
Tricks CSS menyediakan panduan lengkap untuk grid CSS, yang merupakan sumber yang sangat berguna.

Soalan Lazim mengenai susun atur grid CSS

Apakah susun atur grid CSS?

susun atur grid CSS adalah sistem susun atur dalam CSS yang membolehkan anda membuat susun atur berasaskan grid dua dimensi yang kompleks untuk halaman web. Ia menyediakan cara yang lebih fleksibel dan cekap untuk merancang dan meletakkan unsur -unsur dalam grid. grid; harta dalam kod CSS anda. Ini akan menjadikan bekas yang dipilih sebagai bekas grid.

Apakah komponen utama grid CSS? Bekas ditakrifkan menggunakan paparan: grid; harta, dan barang-barang adalah unsur-unsur yang diletakkan di dalam bekas. -Sebelahan, grid-template-lajur, atau menggunakan templat grid harta tanah. Lebar lajur dan ketinggian baris dengan menggunakan nilai yang berbeza dalam definisi grid-templat anda, seperti panjang tetap, peratusan, atau unit FR untuk saiz fleksibel.

Bolehkah saya bersarang grid dalam grid? Bolehkah saya membuat grid menyesuaikan diri dengan saiz skrin yang berbeza?

Ya, grid CSS boleh responsif. Anda boleh menggunakan pertanyaan media, peratusan, atau unit relatif untuk menyesuaikan susun atur grid anda ke saiz dan peranti skrin yang berbeza.

Atas ialah kandungan terperinci Panduan pemula ' s ke susun atur grid CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!