Reka bentuk semula tapak untuk menggunakan susun atur grid CSS

Dalam artikel ini, kita akan melihat CSS Grid dalam tindakan dengan membuat susun atur laman web multi-lajur yang responsif.

CSS Grid adalah trend baru, panas dalam pembangunan web hari ini. Lupakan susun atur meja dan terapung: Cara baru untuk merancang laman web sudah ada di sini! Teknologi ini memperkenalkan grid dua dimensi yang menentukan pelbagai bidang susun atur dengan segelintir peraturan CSS.

Grid boleh membuat rangka kerja pihak ketiga seperti 960gs atau grid bootstrap berlebihan, kerana anda dengan mudah boleh melakukan segala-galanya sendiri! Ciri ini disokong oleh semua pelayar utama, walaupun Internet Explorer melaksanakan versi lama spesifikasi.

Jika anda baru untuk susun atur grid, lihat panduan pemula kami ke grid CSS.

Takeaways Key

susun atur grid CSS memudahkan penciptaan susun atur multi-lajur, menghapuskan keperluan teknik lama seperti terapung dan jadual paparan.
grid CSS membolehkan penyusunan semula dan saiz semula kawasan grid mudah, menjadikannya kaedah reka bentuk yang lebih fleksibel dan intuitif berbanding dengan kerangka CSS tradisional seperti bootstrap.
Pelaksanaan grid CSS melibatkan menentukan bekas dengan paparan: grid, menubuhkan lajur dan baris, dan meletakkan unsur -unsur ke dalam kawasan grid yang ditetapkan menggunakan peraturan CSS yang mudah.
• grid CSS responsif secara semula jadi, membolehkan penyusunan semula kandungan mudah untuk saiz skrin yang berbeza menggunakan pertanyaan media yang minimum.
• untuk penyemak imbas yang tidak menyokong sepenuhnya grid CSS, seperti Internet Explorer, Gaya Fallback menggunakan pertanyaan inline-block dan media memastikan bahawa susun atur masih diberikan dengan berkesan.
Grid CSS dan Flexbox boleh digabungkan untuk mengendalikan keperluan reka bentuk yang kompleks, mempamerkan keserasian dan fleksibiliti grid CSS dalam reka bentuk web moden.
• Apa yang akan kita bina

Jadi, kami diminta untuk membuat susun atur laman web biasa dengan tajuk, kawasan kandungan utama, bar sisi ke kanan, senarai penaja, dan footer:

pemaju lain telah cuba menyelesaikan tugas ini dan menghasilkan penyelesaian yang melibatkan terapung, memaparkan: jadual, dan beberapa hacks ClearFix. Kami akan merujuk kepada susun atur sedia ada ini sebagai "awal":

lihat pen sp: susun atur berbilang lajur dengan terapung oleh sitepoint (@sitePoint) pada codepen.

Sehingga baru -baru ini, terapung dianggap sebagai pilihan terbaik untuk membuat susun atur tersebut. Sebelum itu, kami terpaksa menggunakan jadual HTML, tetapi mereka mempunyai beberapa kelemahan. Khususnya, susun atur jadual sedemikian sangat tegar, memerlukan banyak tag (jadual, tr, td, th dan lain -lain), dan secara semantik tag ini digunakan untuk mempersembahkan data jadual, bukan untuk merancang susun atur.

tetapi CSS terus berkembang, dan sekarang kita mempunyai grid CSS. Secara konseptual, ia sama dengan susun atur meja lama tetapi boleh menggunakan elemen HTML semantik dengan susun atur yang lebih fleksibel.

merancang grid

Perkara pertama yang pertama: kita perlu menentukan struktur HTML asas untuk dokumen kami. Sebelum itu, mari kita bercakap secara ringkas tentang bagaimana contoh awal berfungsi. Ia mempunyai blok utama berikut:

• .container adalah pembungkus global yang mempunyai margin kecil di sebelah kiri dan ke kanan.
• .Main-Header adalah tajuk yang mengandungi .logo (menduduki 20% ruang, terapung ke kiri) dan .main-menu (menduduki 79% ruang, terapung ke kanan). Header juga diberikan pembetulan hacky untuk membersihkan terapung.
• .Content-area-wrapper membungkus kawasan utama. (Menduduki 66.6% ruang tolak 1rem yang dikhaskan untuk margin, terapung ke kiri) dan .sidebar (menduduki 33.3% ruang, terapung ke kanan ). Pembungkus itu sendiri juga ditugaskan dengan ClearFix.
• .Sponsors-Wrapper mengandungi logo penaja. Di dalamnya, terdapat bahagian .sonsors dengan harta paparan yang ditetapkan ke jadual. Setiap penaja, pada gilirannya, dipaparkan sebagai sel meja.
• .footer adalah footer kami dan menjangkau 100% ruang.

Susun atur baru kami akan sangat serupa dengan yang awal, tetapi dengan satu pengecualian: kami tidak akan menambah pembungkus .main-header dan. Berikut adalah versi baru HTML:

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span> class<span>="logo"</span>></span>
</span>    <span><span><span><h1</span>></span><span><span><a</span> href<span>="#"</span>></span>DemoSite<span><span></a</span>></span><span><span></h1</span>></span>
</span>  <span><span><span></header</span>></span>
</span>
  <span><span><span><nav</span> class<span>="main-menu"</span>></span>
</span>    <span><span><span><ul</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Our clients<span><span></a</span>></span><span><span></li</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Products<span><span></a</span>></span><span><span></li</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Contact<span><span></a</span>></span><span><span></li</span>></span>
</span>    <span><span><span></ul</span>></span>
</span>  <span><span><span></nav</span>></span>
</span>
  <span><span><span><main</span> class<span>="content-area"</span>></span>
</span>    <span><span><span><h2</span>></span>Welcome!<span><span></h2</span>></span>
</span>
    <span><span><span><p</span>></span>
</span>      Content
    <span><span><span></p</span>></span>
</span>  <span><span><span></main</span>></span>
</span>
  <span><span><span><aside</span> class<span>="sidebar"</span>></span>
</span>    <span><span><span><h3</span>></span>Additional stuff<span><span></h3</span>></span>
</span>
    <span><span><span><ul</span>></span>
</span>      <span><span><span><li</span>></span>Items<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Are<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Listed<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Here<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Wow!<span><span></li</span>></span>
</span>    <span><span><span></ul</span>></span>
</span>  <span><span><span></aside</span>></span>
</span>
  <span><span><span><section</span> class<span>="sponsors-wrapper"</span>></span>
</span>    <span><span><span><h2</span>></span>Our sponsors<span><span></h2</span>></span>
</span>
    <span><span><span><section</span> class<span>="sponsors"</span>></span>
</span>      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/150x150"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/200x150"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/100x200"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/100x100"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/200x200"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>    <span><span><span></section</span>></span>
</span>
  <span><span><span></section</span>></span>
</span>
  <span><span><span><footer</span> class<span>="footer"</span>></span>
</span>    <span><span><span><p</span>></span>
</span>      <span title="©">&copy; 2018 DemoSite. White&amp;Sons LLC. All rights (perhaps) reserved.
</span>    <span><span><span></p</span>></span>
</span>  <span><span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

Perhatikan bahawa anda boleh menggunakan badan sebagai Global .container; Itu hanya soal keutamaan dalam kes ini. Semua dalam semua, kami mempunyai enam bidang utama:

1. logo
2. menu
3. Kandungan Utama
4. sidebar
5. Penaja
6. footer

Biasanya ia disyorkan bahawa anda melaksanakan pendekatan mudah alih pertama. Iaitu, anda bermula dari susun atur mudah alih dan kemudian menambah gaya untuk skrin yang lebih besar. Ini tidak perlu dalam kes ini, kerana kami menyesuaikan susun atur awal yang sudah jatuh ke pandangan linearized pada peranti skrin kecil. Oleh itu, mari kita mulakan dengan memberi tumpuan kepada pelaksanaan grid, dan selepas itu bercakap tentang respons dan peraturan sandaran. Oleh itu, kembali ke skim kami dan lihat bagaimana lajur grid dapat diatur:

Jadi, saya mencadangkan mempunyai tiga lajur (diserlahkan dengan warna merah) dan empat baris (diserlahkan dalam warna biru). Sesetengah kawasan, seperti logo, akan menduduki hanya satu lajur, sedangkan yang lain, seperti kandungan utama, akan merangkumi pelbagai lajur. Kemudian kita dapat mengubah suai susun atur dengan mudah, menggerakkan kawasan sekitar, atau menambah yang baru.

Mengikuti skema, berikan setiap kawasan nama yang unik. Ini akan digunakan dalam susun atur yang ditakrifkan di bawah:

<span><span>.logo</span> {
</span>  <span>grid-area: logo;
</span><span>}
</span>
<span><span>.main-menu</span> {
</span>  <span>grid-area: menu;
</span><span>}
</span>
<span><span>.content-area</span> {
</span>  <span>grid-area: content;
</span><span>}
</span>
<span><span>.sidebar</span> {
</span>  <span>grid-area: sidebar;
</span><span>}
</span>
<span><span>.sponsors-wrapper</span> {
</span>  <span>grid-area: sponsors;
</span><span>}
</span>
<span><span>.footer</span> {
</span>  <span>grid-area: footer;
</span><span>}
</span>

Sekarang tetapkan harta paparan ke grid, tentukan tiga lajur dan tambahkan margin kecil ke kiri dan kanan bekas utama:

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span> class<span>="logo"</span>></span>
</span>    <span><span><span><h1</span>></span><span><span><a</span> href<span>="#"</span>></span>DemoSite<span><span></a</span>></span><span><span></h1</span>></span>
</span>  <span><span><span></header</span>></span>
</span>
  <span><span><span><nav</span> class<span>="main-menu"</span>></span>
</span>    <span><span><span><ul</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Our clients<span><span></a</span>></span><span><span></li</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Products<span><span></a</span>></span><span><span></li</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Contact<span><span></a</span>></span><span><span></li</span>></span>
</span>    <span><span><span></ul</span>></span>
</span>  <span><span><span></nav</span>></span>
</span>
  <span><span><span><main</span> class<span>="content-area"</span>></span>
</span>    <span><span><span><h2</span>></span>Welcome!<span><span></h2</span>></span>
</span>
    <span><span><span><p</span>></span>
</span>      Content
    <span><span><span></p</span>></span>
</span>  <span><span><span></main</span>></span>
</span>
  <span><span><span><aside</span> class<span>="sidebar"</span>></span>
</span>    <span><span><span><h3</span>></span>Additional stuff<span><span></h3</span>></span>
</span>
    <span><span><span><ul</span>></span>
</span>      <span><span><span><li</span>></span>Items<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Are<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Listed<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Here<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Wow!<span><span></li</span>></span>
</span>    <span><span><span></ul</span>></span>
</span>  <span><span><span></aside</span>></span>
</span>
  <span><span><span><section</span> class<span>="sponsors-wrapper"</span>></span>
</span>    <span><span><span><h2</span>></span>Our sponsors<span><span></h2</span>></span>
</span>
    <span><span><span><section</span> class<span>="sponsors"</span>></span>
</span>      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/150x150"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/200x150"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/100x200"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/100x100"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/200x200"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>    <span><span><span></section</span>></span>
</span>
  <span><span><span></section</span>></span>
</span>
  <span><span><span><footer</span> class<span>="footer"</span>></span>
</span>    <span><span><span><p</span>></span>
</span>      <span title="©">&copy; 2018 DemoSite. White&amp;Sons LLC. All rights (perhaps) reserved.
</span>    <span><span><span></p</span>></span>
</span>  <span><span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

paparan: Grid mentakrifkan bekas grid dan menetapkan konteks pemformatan khas untuk anak -anaknya. FR adalah unit khas yang bermaksud "pecahan ruang bebas bekas grid". 2 6 4 memberi kita 12, dan 6/20 = 0.5. Ini bermakna lajur tengah akan menduduki 50% ruang bebas.

Saya juga ingin menambah beberapa jarak antara baris dan lajur:

<span><span>.logo</span> {
</span>  <span>grid-area: logo;
</span><span>}
</span>
<span><span>.main-menu</span> {
</span>  <span>grid-area: menu;
</span><span>}
</span>
<span><span>.content-area</span> {
</span>  <span>grid-area: content;
</span><span>}
</span>
<span><span>.sidebar</span> {
</span>  <span>grid-area: sidebar;
</span><span>}
</span>
<span><span>.sponsors-wrapper</span> {
</span>  <span>grid-area: sponsors;
</span><span>}
</span>
<span><span>.footer</span> {
</span>  <span>grid-area: footer;
</span><span>}
</span>

Setelah melakukan ini, kita boleh bekerja dengan kawasan individu. Tetapi sebelum membungkus bahagian ini, mari kita tambahkan beberapa gaya umum:

<span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>margin: 0 2rem;
</span>  <span>grid-template-columns: 2fr 6fr 4fr;
</span><span>}
</span>

baik! Sekarang kita boleh meneruskan sasaran pertama, yang akan menjadi tajuk.

Merancang header

Header kami menduduki baris pertama yang sepatutnya mempunyai ketinggian tertentu yang ditetapkan ke 3rem. Dalam susun atur awal ini diselesaikan dengan memberikan harta ketinggian untuk pembalut header:

<span><span>.container</span> {
</span>  // ...
  <span>grid-gap: 2rem 1rem;
</span><span>}
</span>

Juga ambil perhatian bahawa logo dan menu secara menegak sejajar ke tengah, yang dicapai menggunakan trik ketinggian garis:

<span>* {
</span>  <span>box-sizing: border-box;
</span><span>}
</span>
<span>html {
</span>  <span>font-size: 16px;
</span>  <span>font-family: Georgia, serif;
</span><span>}
</span>
<span>body {
</span>  <span>background-color: #fbfbfb;
</span><span>}
</span>
<span>h1<span>, h2, h3</span> {
</span>  <span>margin-top: 0;
</span><span>}
</span>
<span>header h1 {
</span>  <span>margin: 0;
</span><span>}
</span>
<span>main p {
</span>  <span>margin-bottom: 0;
</span><span>}
</span>

dengan grid CSS, bagaimanapun, perkara akan menjadi lebih mudah: kita tidak akan memerlukan sebarang hacks CSS.

Mula dengan menentukan baris pertama:

<span><span>.main-header</span> {
</span>  <span>height: 3rem;
</span><span>}
</span>

Logo kami harus menduduki hanya satu lajur, sedangkan menu harus merangkumi dua lajur. Kami dapat menyatakan niat kami dengan bantuan harta tanah grid-template, yang merujuk nama-nama kawasan grid yang diberikan di atas:

<span><span>.logo</span> {
</span>  // ...
  <span>height: 100%;
</span>  <span>line-height: 3rem;
</span><span>}
</span>

Apa yang berlaku di sini? Nah, dengan mengatakan logo hanya sekali, kami memastikan bahawa ia hanya menduduki satu-lajur paling kiri. Menu Menu bermaksud bahawa menu menduduki dua lajur: tengah dan yang paling kanan. Lihat betapa mudahnya peraturan ini!

kini menyelaraskan logo pada paksi y:

<span><span>.container</span> {
</span>  // ...
  <span>grid-template-rows: 3rem;
</span><span>}
</span>

menu harus berpusat secara menegak dan ditarik ke kanan:

<span><span>.container</span> {
</span>  // ...
  <span>grid-template-areas:
</span>    <span>"logo menu menu";
</span><span>}
</span>

Menu kami dibina dengan tag UL dan Li, jadi mari juga gaya mereka sedikit dengan mengeluarkan penanda, membatalkan margin/paddings, dan menetapkan menu ke bekas Flex:

<span><span>.logo</span> {
</span>  <span>grid-area: logo;
</span>  <span>align-self: center;
</span><span>}
</span>

Itu cukup banyak. Untuk memerhatikan hasilnya, saya akan menggunakan Firefox dengan alat penyegar grid CSS yang berguna. .

Selepas itu, teruskan ke tab Peraturan CSS, dan cari paparan: Harta Grid. Dengan menekan ikon kecil di sebelah nilai grid, anda boleh mengaktifkan atau melumpuhkan penyerlah:

inilah hasilnya:

Highlighter memaparkan semua baris dan lajur anda, serta margin di antara mereka dan nama -nama kawasan. Anda boleh menyesuaikan output di dalam bahagian susun atur, yang juga menyenaraikan semua grid pada halaman:

Jadi, kami telah berurusan dengan tajuk, jadi mari kita pergi ke kawasan kandungan utama dan bar sisi.

Kandungan Utama dan Sidebar

Kawasan kandungan utama kami harus merangkumi dua lajur, sedangkan bar sisi hanya harus menduduki satu. Bagi baris, saya ingin ketinggiannya ditetapkan secara automatik. Kami boleh mengemas kini grid .kontainer dengan sewajarnya:

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span> class<span>="logo"</span>></span>
</span>    <span><span><span><h1</span>></span><span><span><a</span> href<span>="#"</span>></span>DemoSite<span><span></a</span>></span><span><span></h1</span>></span>
</span>  <span><span><span></header</span>></span>
</span>
  <span><span><span><nav</span> class<span>="main-menu"</span>></span>
</span>    <span><span><span><ul</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Our clients<span><span></a</span>></span><span><span></li</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Products<span><span></a</span>></span><span><span></li</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Contact<span><span></a</span>></span><span><span></li</span>></span>
</span>    <span><span><span></ul</span>></span>
</span>  <span><span><span></nav</span>></span>
</span>
  <span><span><span><main</span> class<span>="content-area"</span>></span>
</span>    <span><span><span><h2</span>></span>Welcome!<span><span></h2</span>></span>
</span>
    <span><span><span><p</span>></span>
</span>      Content
    <span><span><span></p</span>></span>
</span>  <span><span><span></main</span>></span>
</span>
  <span><span><span><aside</span> class<span>="sidebar"</span>></span>
</span>    <span><span><span><h3</span>></span>Additional stuff<span><span></h3</span>></span>
</span>
    <span><span><span><ul</span>></span>
</span>      <span><span><span><li</span>></span>Items<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Are<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Listed<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Here<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Wow!<span><span></li</span>></span>
</span>    <span><span><span></ul</span>></span>
</span>  <span><span><span></aside</span>></span>
</span>
  <span><span><span><section</span> class<span>="sponsors-wrapper"</span>></span>
</span>    <span><span><span><h2</span>></span>Our sponsors<span><span></h2</span>></span>
</span>
    <span><span><span><section</span> class<span>="sponsors"</span>></span>
</span>      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/150x150"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/200x150"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/100x200"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/100x100"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/200x200"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>    <span><span><span></section</span>></span>
</span>
  <span><span><span></section</span>></span>
</span>
  <span><span><span><footer</span> class<span>="footer"</span>></span>
</span>    <span><span><span><p</span>></span>
</span>      <span title="©">&copy; 2018 DemoSite. White&amp;Sons LLC. All rights (perhaps) reserved.
</span>    <span><span><span></p</span>></span>
</span>  <span><span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

Saya ingin menambah padding untuk bar sisi untuk memberikan ruang visual yang lebih banyak:

<span><span>.logo</span> {
</span>  <span>grid-area: logo;
</span><span>}
</span>
<span><span>.main-menu</span> {
</span>  <span>grid-area: menu;
</span><span>}
</span>
<span><span>.content-area</span> {
</span>  <span>grid-area: content;
</span><span>}
</span>
<span><span>.sidebar</span> {
</span>  <span>grid-area: sidebar;
</span><span>}
</span>
<span><span>.sponsors-wrapper</span> {
</span>  <span>grid-area: sponsors;
</span><span>}
</span>
<span><span>.footer</span> {
</span>  <span>grid-area: footer;
</span><span>}
</span>

inilah hasilnya, seperti yang dilihat dalam alat grid Firefox:

Penaja

Bahagian penaja hendaklah mengandungi lima item dengan lebar dan ketinggian yang sama. Setiap item, pada gilirannya, akan mempunyai satu imej.

Dalam susun atur awal, blok ini digayakan dengan paparan: jadual, tetapi kami tidak akan bergantung kepadanya. Sebenarnya, bahagian penaja boleh menjadi calon yang hebat untuk menggunakan grid CSS juga!

Pertama sekali, tweak kawasan grid-templat untuk memasukkan kawasan penaja:

Sekarang putar bahagian .Sponsors ke dalam grid juga:

<span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>margin: 0 2rem;
</span>  <span>grid-template-columns: 2fr 6fr 4fr;
</span><span>}
</span>

Selagi kita memerlukan lima item dengan lebar yang sama, fungsi ulangan () boleh digunakan untuk menentukan lajur:

<span><span>.container</span> {
</span>  // ...
  <span>grid-gap: 2rem 1rem;
</span><span>}
</span>

Bagi baris, ketinggiannya harus ditetapkan secara automatik. Jurang antara lajur hendaklah sama dengan 1rem:

<span>* {
</span>  <span>box-sizing: border-box;
</span><span>}
</span>
<span>html {
</span>  <span>font-size: 16px;
</span>  <span>font-family: Georgia, serif;
</span><span>}
</span>
<span>body {
</span>  <span>background-color: #fbfbfb;
</span><span>}
</span>
<span>h1<span>, h2, h3</span> {
</span>  <span>margin-top: 0;
</span><span>}
</span>
<span>header h1 {
</span>  <span>margin: 0;
</span><span>}
</span>
<span>main p {
</span>  <span>margin-bottom: 0;
</span><span>}
</span>

Gaya Setiap item:

<span><span>.main-header</span> {
</span>  <span>height: 3rem;
</span><span>}
</span>

Berikut adalah hasil pertengahan:

<span><span>.logo</span> {
</span>  // ...
  <span>height: 100%;
</span>  <span>line-height: 3rem;
</span><span>}
</span>

Contoh ini menggambarkan bahawa anda boleh bersarang tanpa sebarang masalah. Satu lagi penyelesaian mungkin menggunakan Flexbox, tetapi dalam hal ini penaja boleh membungkus jika tidak cukup lebar untuk mereka.

Sekarang saya ingin memusatkan imej kedua -dua secara menegak dan mendatar. Kami mungkin cuba melakukan perkara berikut:

Place-Self menyelaraskan elemen pada paksi x dan y. Ia adalah harta tersendiri untuk menyelaraskan diri dan membenarkan diri.

Imej -imej itu akan diselaraskan, tetapi malangnya latar belakang putih hilang. Ini kerana setiap .Sponsor kini mempunyai lebar dan ketinggian sama dengan dimensi imej:

<span><span>.container</span> {
</span>  // ...
  <span>grid-template-rows: 3rem;
</span><span>}
</span>

ini bermakna kita memerlukan pendekatan yang berbeza di sini, dan salah satu penyelesaian yang mungkin adalah menggunakan Flexbox:

sekarang semuanya dipaparkan dengan betul, dan sekarang kita tahu bahawa grid memainkan dengan baik dengan flexbox:

footer

Bahagian terakhir kami adalah footer, dan sebenarnya bahagian paling mudah. Apa yang perlu kita lakukan hanyalah merangkumi ketiga -tiga lajur:

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span> class<span>="logo"</span>></span>
</span>    <span><span><span><h1</span>></span><span><span><a</span> href<span>="#"</span>></span>DemoSite<span><span></a</span>></span><span><span></h1</span>></span>
</span>  <span><span><span></header</span>></span>
</span>
  <span><span><span><nav</span> class<span>="main-menu"</span>></span>
</span>    <span><span><span><ul</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Our clients<span><span></a</span>></span><span><span></li</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Products<span><span></a</span>></span><span><span></li</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Contact<span><span></a</span>></span><span><span></li</span>></span>
</span>    <span><span><span></ul</span>></span>
</span>  <span><span><span></nav</span>></span>
</span>
  <span><span><span><main</span> class<span>="content-area"</span>></span>
</span>    <span><span><span><h2</span>></span>Welcome!<span><span></h2</span>></span>
</span>
    <span><span><span><p</span>></span>
</span>      Content
    <span><span><span></p</span>></span>
</span>  <span><span><span></main</span>></span>
</span>
  <span><span><span><aside</span> class<span>="sidebar"</span>></span>
</span>    <span><span><span><h3</span>></span>Additional stuff<span><span></h3</span>></span>
</span>
    <span><span><span><ul</span>></span>
</span>      <span><span><span><li</span>></span>Items<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Are<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Listed<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Here<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Wow!<span><span></li</span>></span>
</span>    <span><span><span></ul</span>></span>
</span>  <span><span><span></aside</span>></span>
</span>
  <span><span><span><section</span> class<span>="sponsors-wrapper"</span>></span>
</span>    <span><span><span><h2</span>></span>Our sponsors<span><span></h2</span>></span>
</span>
    <span><span><span><section</span> class<span>="sponsors"</span>></span>
</span>      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/150x150"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/200x150"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/100x200"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/100x100"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/200x200"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>    <span><span><span></section</span>></span>
</span>
  <span><span><span></section</span>></span>
</span>
  <span><span><span><footer</span> class<span>="footer"</span>></span>
</span>    <span><span><span><p</span>></span>
</span>      <span title="©">&copy; 2018 DemoSite. White&amp;Sons LLC. All rights (perhaps) reserved.
</span>    <span><span><span></p</span>></span>
</span>  <span><span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

Pada dasarnya, susun atur selesai! Walau bagaimanapun, kami belum selesai: Laman ini juga perlu responsif. Oleh itu, mari kita jaga tugas ini di bahagian seterusnya.

Membuat susun atur responsif

Mempunyai grid CSS di tempat, sebenarnya sangat mudah untuk memperkenalkan respons, kerana kita dapat dengan cepat meletakkan semula kawasan tersebut.

skrin besar

mari kita mulakan dengan skrin besar (dalam artikel ini saya akan melekat pada titik putus yang sama seperti yang ditakrifkan dalam Bootstrap 4). Saya ingin mengurangkan margin mendatar bekas utama dan jurang antara penaja individu:

<span><span>.logo</span> {
</span>  <span>grid-area: logo;
</span><span>}
</span>
<span><span>.main-menu</span> {
</span>  <span>grid-area: menu;
</span><span>}
</span>
<span><span>.content-area</span> {
</span>  <span>grid-area: content;
</span><span>}
</span>
<span><span>.sidebar</span> {
</span>  <span>grid-area: sidebar;
</span><span>}
</span>
<span><span>.sponsors-wrapper</span> {
</span>  <span>grid-area: sponsors;
</span><span>}
</span>
<span><span>.footer</span> {
</span>  <span>grid-area: footer;
</span><span>}
</span>

skrin sederhana

Di skrin sederhana, saya ingin kawasan kandungan utama dan bar sisi untuk menduduki ketiga -tiga lajur:

<span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>margin: 0 2rem;
</span>  <span>grid-template-columns: 2fr 6fr 4fr;
</span><span>}
</span>

mari juga mengurangkan saiz fon dan tumpukan penaja supaya mereka dipaparkan satu di bawah yang lain. Jurang antara lajur hendaklah sifar (kerana sebenarnya hanya akan ada satu lajur). Sebaliknya, saya akan menetapkan jurang antara baris:

<span><span>.container</span> {
</span>  // ...
  <span>grid-gap: 2rem 1rem;
</span><span>}
</span>

ini adalah bagaimana susun atur kelihatan pada skrin sederhana sekarang:

skrin kecil

di skrin kecil, kami akan memaparkan setiap kawasan pada baris yang berasingan, yang bermaksud bahawa hanya satu lajur sekarang:

<span>* {
</span>  <span>box-sizing: border-box;
</span><span>}
</span>
<span>html {
</span>  <span>font-size: 16px;
</span>  <span>font-family: Georgia, serif;
</span><span>}
</span>
<span>body {
</span>  <span>background-color: #fbfbfb;
</span><span>}
</span>
<span>h1<span>, h2, h3</span> {
</span>  <span>margin-top: 0;
</span><span>}
</span>
<span>header h1 {
</span>  <span>margin: 0;
</span><span>}
</span>
<span>main p {
</span>  <span>margin-bottom: 0;
</span><span>}
</span>

Menu tidak boleh ditarik ke kanan dalam kes ini, dan kami juga tidak memerlukan jurang antara lajur:

<span><span>.main-header</span> {
</span>  <span>height: 3rem;
</span><span>}
</span>

pekerjaan itu selesai:

Perhatikan bahawa anda juga boleh menyusun semula item grid dengan mudah untuk pelbagai skrin. Katakan kami ingin meletakkan menu di bahagian bawah pada skrin kecil (supaya pelawat tidak perlu menatal selepas mereka selesai bahan bacaan di halaman). Untuk berbuat demikian, hanya tweak kawasan grid-templat:

melakukan tanpa pertanyaan media

<span><span>.logo</span> {
</span>  // ...
  <span>height: 100%;
</span>  <span>line-height: 3rem;
</span><span>}
</span>

Ia patut disebutkan bahawa kita boleh membuat penaja menghalang responsif tanpa sebarang pertanyaan media sama sekali. Ini mungkin dengan bantuan harta auto-fit dan fungsi Minmax. Untuk melihat mereka dalam tindakan, tweak gaya untuk .sonsors seperti ini:

Fungsi berulang, seperti yang sudah anda ketahui, mengulangi lajur seberapa banyak yang diperlukan.

<span><span>.container</span> {
</span>  // ...
  <span>grid-template-rows: 3rem;
</span><span>}
</span>

auto-fill bermaksud "mengisi baris dengan sebanyak mungkin lajur". Sekiranya tidak ada ruang yang cukup untuk lajur, ia akan diletakkan pada baris seterusnya.

Minmax membolehkan kami menentukan nilai minimum dan maksimum untuk lebar lajur. Dalam kes ini, setiap lajur harus merangkumi 1 pecahan ruang bebas, tetapi tidak kurang dari 200 piksel.

Semua ini bermakna bahawa pada skrin yang lebih kecil lajur boleh disusut ke paling 200px setiap satu. Sekiranya masih ada ruang yang tidak mencukupi, satu atau beberapa lajur akan dipindahkan ke garisan yang berasingan. Inilah hasil daripada menggunakan peraturan CSS di atas:

fallbacks

Malangnya, grid CSS belum disokong sepenuhnya oleh semua pelayar, dan anda mungkin meneka mana yang masih melaksanakan versi yang lebih lama dari spesifikasi. Ya, itu Internet Explorer 10 dan 11. Jika anda membuka demo dalam penyemak imbas itu, anda akan melihat bahawa grid tidak berfungsi sama sekali, dan kawasan itu hanya disusun:

Sudah tentu, ini bukan akhir dunia, kerana laman web ini masih boleh digunakan, tetapi mari kita tambahkan sekurang -kurangnya beberapa peraturan sandaran. Berita baiknya ialah jika elemen itu terapung dan juga mempunyai grid yang ditugaskan, grid itu diutamakan. Juga, paparan, vertikal-align, dan beberapa sifat lain juga tidak mempunyai kesan ke atas item grid, jadi mari kita ambil kesempatan daripada fakta itu.

Menu yang disusun kelihatan bagus seperti, tetapi bar sisi mungkin diletakkan di sebelah kandungan utama, tidak di bawahnya. Kita boleh mencapai ini dengan menggunakan paparan: blok sebaris:

Dalam semua pelayar yang menyokong grid, sifat -sifat ini tidak akan memberi kesan, tetapi dalam IE mereka akan digunakan seperti yang diharapkan. Satu lagi harta yang kita perlukan untuk tweak adalah lebar:

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span> class<span>="logo"</span>></span>
</span>    <span><span><span><h1</span>></span><span><span><a</span> href<span>="#"</span>></span>DemoSite<span><span></a</span>></span><span><span></h1</span>></span>
</span>  <span><span><span></header</span>></span>
</span>
  <span><span><span><nav</span> class<span>="main-menu"</span>></span>
</span>    <span><span><span><ul</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Our clients<span><span></a</span>></span><span><span></li</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Products<span><span></a</span>></span><span><span></li</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Contact<span><span></a</span>></span><span><span></li</span>></span>
</span>    <span><span><span></ul</span>></span>
</span>  <span><span><span></nav</span>></span>
</span>
  <span><span><span><main</span> class<span>="content-area"</span>></span>
</span>    <span><span><span><h2</span>></span>Welcome!<span><span></h2</span>></span>
</span>
    <span><span><span><p</span>></span>
</span>      Content
    <span><span><span></p</span>></span>
</span>  <span><span><span></main</span>></span>
</span>
  <span><span><span><aside</span> class<span>="sidebar"</span>></span>
</span>    <span><span><span><h3</span>></span>Additional stuff<span><span></h3</span>></span>
</span>
    <span><span><span><ul</span>></span>
</span>      <span><span><span><li</span>></span>Items<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Are<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Listed<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Here<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Wow!<span><span></li</span>></span>
</span>    <span><span><span></ul</span>></span>
</span>  <span><span><span></aside</span>></span>
</span>
  <span><span><span><section</span> class<span>="sponsors-wrapper"</span>></span>
</span>    <span><span><span><h2</span>></span>Our sponsors<span><span></h2</span>></span>
</span>
    <span><span><span><section</span> class<span>="sponsors"</span>></span>
</span>      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/150x150"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/200x150"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/100x200"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/100x100"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/200x200"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>    <span><span><span></section</span>></span>
</span>
  <span><span><span></section</span>></span>
</span>
  <span><span><span><footer</span> class<span>="footer"</span>></span>
</span>    <span><span><span><p</span>></span>
</span>      <span title="©">&copy; 2018 DemoSite. White&amp;Sons LLC. All rights (perhaps) reserved.
</span>    <span><span><span></p</span>></span>
</span>  <span><span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

Tetapi setelah menambah gaya ini, susun atur grid kami sekarang akan kelihatan lebih buruk, kerana harta lebar

<span><span>.logo</span> {
</span>  <span>grid-area: logo;
</span><span>}
</span>
<span><span>.main-menu</span> {
</span>  <span>grid-area: menu;
</span><span>}
</span>
<span><span>.content-area</span> {
</span>  <span>grid-area: content;
</span><span>}
</span>
<span><span>.sidebar</span> {
</span>  <span>grid-area: sidebar;
</span><span>}
</span>
<span><span>.sponsors-wrapper</span> {
</span>  <span>grid-area: sponsors;
</span><span>}
</span>
<span><span>.footer</span> {
</span>  <span>grid-area: footer;
</span><span>}
</span>

tidak

diabaikan oleh item grid. Ini boleh diperbaiki dengan bantuan @supports CSS Query. IE tidak memahami pertanyaan ini, tetapi ia tidak perlu: Kami akan menggunakannya untuk menetapkan grid!

Sekarang mari kita jaga item penaja dan tambahkan beberapa margin teratas untuk setiap blok:

<span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>margin: 0 2rem;
</span>  <span>grid-template-columns: 2fr 6fr 4fr;
</span><span>}
</span>

Kami tidak memerlukan sebarang margin teratas apabila grid disokong, jadi membatalkannya di dalam @Supports Query:

<span><span>.container</span> {
</span>  // ...
  <span>grid-gap: 2rem 1rem;
</span><span>}
</span>

Akhir sekali, mari kita tambahkan beberapa respons untuk IE. Kami hanya akan meregangkan kandungan utama, bar sisi, dan setiap penaja untuk lebar penuh pada skrin yang lebih kecil:

<span>* {
</span>  <span>box-sizing: border-box;
</span><span>}
</span>
<span>html {
</span>  <span>font-size: 16px;
</span>  <span>font-family: Georgia, serif;
</span><span>}
</span>
<span>body {
</span>  <span>background-color: #fbfbfb;
</span><span>}
</span>
<span>h1<span>, h2, h3</span> {
</span>  <span>margin-top: 0;
</span><span>}
</span>
<span>header h1 {
</span>  <span>margin: 0;
</span><span>}
</span>
<span>main p {
</span>  <span>margin-bottom: 0;
</span><span>}
</span>

Jangan lupa untuk menetapkan lebar penaja untuk pelayar yang menyokong grid:

<span><span>.main-header</span> {
</span>  <span>height: 3rem;
</span><span>}
</span>

Inilah cara susun atur di Internet Explorer sekarang:

<span><span>.logo</span> {
</span>  // ...
  <span>height: 100%;
</span>  <span>line-height: 3rem;
</span><span>}
</span>

anda boleh melihat hasil akhir pada codepen:

lihat pen sp: susun atur berbilang lajur dengan grid oleh sitepoint (@sitePoint) pada codepen.

Kesimpulan

Dalam artikel ini, kami telah melihat grid CSS dalam tindakan dan menggunakannya untuk mengubah reka bentuk susun atur berasaskan apungan yang sedia ada. Membandingkan kedua -dua penyelesaian ini, kita dapat melihat bahawa kod HTML dan CSS penyelesaian "grid" lebih kecil (tidak mengira kejatuhan, tentu saja), lebih mudah, dan lebih ekspresif. Dengan bantuan harta tanah grid-template, mudah difahami bagaimana kawasan individu dibentangkan, dan kami dapat dengan cepat meletakkan semula mereka atau menyesuaikan saiz mereka. Selain itu, kita tidak perlu bergantung pada pelbagai helah hacky seperti ClearFix.

Jadi, seperti yang anda lihat, grid CSS adalah alternatif yang hebat untuk terapung, dan ia sangat siap pengeluaran. Anda mungkin perlu memberikan beberapa peraturan sandaran untuk penjelajah internet (yang melaksanakan versi yang lebih lama dari spesifikasi), tetapi seperti yang anda lihat, mereka tidak begitu kompleks, dan secara umumnya laman web ini masih boleh digunakan walaupun tanpa keserasian ke belakang Semua.

Adakah anda sudah cuba membuat laman web dengan grid CSS? Apakah kesan anda? Kongsi pendapat anda dalam komen!

soalan yang sering ditanya mengenai retrofit grid CSS

Apakah kepentingan retrofit grid CSS dalam reka bentuk web? Ia adalah sistem dua dimensi, yang bermaksud ia boleh mengendalikan kedua-dua lajur dan baris, tidak seperti Flexbox yang sebahagian besarnya sistem satu dimensi. Ini menjadikannya alat yang serba boleh untuk membuat reka bentuk responsif yang menyesuaikan diri dengan saiz dan resolusi skrin yang berbeza. Ia juga memudahkan proses menyelaraskan dan mengedarkan ruang di antara item dalam bekas, walaupun saiznya tidak diketahui atau dinamik. Retrofit menonjol dari sistem grid lain kerana fleksibiliti dan kemudahan penggunaannya. Tidak seperti sistem lain yang memerlukan pengekodan dan pengiraan yang luas, retrofit grid CSS membolehkan pemaju membuat susun atur kompleks dengan kod minimum. Ia juga menawarkan lebih banyak kawalan ke atas penempatan dan penjajaran unsur -unsur, menjadikannya pilihan pilihan untuk banyak pemaju. adalah alat yang sangat baik untuk membuat reka bentuk responsif mudah alih. Ia membolehkan pemaju untuk menentukan susun atur grid yang berbeza untuk saiz skrin yang berbeza menggunakan pertanyaan media. Ini bermakna anda boleh membuat susun atur yang kompleks untuk paparan desktop, dan susun atur yang lebih mudah dan lebih mudah untuk paparan mudah alih, semuanya dalam dokumen CSS yang sama. >

retrofit grid CSS serasi dengan pelayar yang paling moden, termasuk Chrome, Firefox, Safari, dan Edge. Walau bagaimanapun, ia mungkin tidak berfungsi seperti yang dijangkakan dalam pelayar atau versi yang lebih lama. Ia sentiasa menjadi amalan yang baik untuk menguji reka bentuk anda dalam pelbagai pelayar untuk memastikan ia berfungsi seperti yang dimaksudkan.

Bagaimana saya boleh mula menggunakan retrofit grid CSS dalam projek saya? Kemudian, anda boleh menentukan saiz lajur dan baris dengan grid-template-lajur dan grid template-baris, dan letakkan unsur-unsur anaknya ke dalam grid dengan grid-lajur dan grid-baris. Retrofit grid dengan kaedah susun atur lain?

Ya, retrofit grid CSS boleh digabungkan dengan kaedah susun atur lain seperti Flexbox untuk reka bentuk yang lebih kompleks. Ini boleh menjadi sangat berguna apabila anda ingin membuat susun atur yang sebahagiannya fleksibel dan sebahagiannya tetap. Retrofit termasuk menggunakan kawasan grid yang dinamakan untuk pengurusan susun atur yang lebih mudah, menggunakan unit FR untuk trek grid fleksibel, dan menggunakan inspektor grid dalam alat pemaju penyemak imbas anda untuk memvisualisasikan dan debug susun atur grid anda. Unsur -unsur? Anda boleh mengawal susunan susunan elemen bertindih dengan harta z-indeks.

Bolehkah saya menggunakan retrofit grid CSS untuk susun atur menegak? Bermakna ia boleh mengendalikan kedua -dua lajur dan baris. Ini menjadikannya alat yang serba boleh untuk mewujudkan susun atur mendatar dan menegak. Isu keserasian pelayar, mengendalikan elemen bertindih, dan menguruskan susun atur kompleks dengan banyak kawasan grid. Walau bagaimanapun, dengan amalan dan pemahaman yang baik tentang sifat grid, cabaran -cabaran ini dapat diatasi.

Atas ialah kandungan terperinci Reka bentuk semula tapak untuk menggunakan susun atur grid CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!