Susun atur grid CSS moden yang mudah dan responsif
mata teras
- grid CSS adalah sistem susun atur yang kuat yang membolehkan penciptaan struktur grid dalam CSS, bukan dalam HTML. Kebanyakan pelayar moden menyokongnya, kecuali IE11, yang menyokong versi lama.
- Artikel ini menunjukkan cara membuat susun atur grid CSS moden yang responsif, secara beransur -ansur menambah grid CSS dan menyediakan kod sandaran untuk pelayar yang lebih tua. Ini termasuk teknologi untuk elemen pusat, projek span, dan menyesuaikan susun atur peralatan kecil.
- Grid CSS menyediakan utiliti seperti
- dan
grid-columnuntuk mencari item grid, serta sifat sepertigrid-row,justify-itemsdanalign-itemsuntuk menyelaraskan dan menyesuaikan item. Ia juga membolehkan grid bersarang, di mana unsur -unsur kanak -kanak grid sendiri boleh menjadi bekas grid.align-self Untuk peranti skrin kecil, anda boleh menukar struktur susun atur dengan mudah untuk linearize dengan grid CSS, mentakrifkan semula kawasan grid dan menggunakan pertanyaan media. Ini menjadikan susun atur yang lebih mudah di skrin yang lebih kecil.
Dalam artikel sebelumnya, kami meneroka empat teknik yang berbeza untuk membina susun atur grid responsif yang mudah. Jawatan itu ditulis pada tahun 2014 - sebelum grid CSS tersedia - jadi dalam tutorial ini kita akan menggunakan struktur HTML yang sama tetapi dengan susun atur grid CSS moden.
Dalam tutorial ini, kami akan menggunakan Float untuk membuat demo dengan susun atur asas dan kemudian meningkatkannya dengan grid CSS. Kami akan menunjukkan banyak utiliti berguna seperti elemen yang berpusat, merangkumi projek, dan mudah mengubah susun atur pada peranti kecil dengan mentakrifkan semula kawasan grid dan menggunakan pertanyaan media. Anda boleh mencari kod dalam codepen ini:
susun atur grid CSS moden responsif
Sebelum kita menyelam untuk membuat demonstrasi grid responsif, mari kita mula memperkenalkan grid CSS.CSS Grid adalah sistem dua dimensi yang kuat yang ditambah kepada pelayar yang paling moden pada tahun 2017. Ia benar -benar mengubah cara kami membuat susun atur HTML. Susun atur grid membolehkan kami membuat struktur grid dalam CSS, bukan dalam HTML.
Di samping IE11, penyemak imbas yang paling moden menyokong grid CSS. Anda boleh menggunakan Caniuse.com untuk menyemak sokongan.
Susun atur grid mempunyai bekas induk yang
harta ditetapkan kepada display atau grid. Unsur -unsur kanak -kanak dari bekas adalah item grid, dan mereka terletak secara tersirat kerana algoritma grid yang kuat. Anda juga boleh menggunakan kelas yang berbeza untuk mengawal penempatan, saiz, kedudukan, dan aspek lain dari projek. inline-grid
mari kita mulakan dengan halaman HTML asas. Buat fail HTML dan tambahkan yang berikut:
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Layout Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h2 id="CSS-Grid-Layout-Example">CSS Grid Layout Example</h2>
</header>
<aside class="sidebar">
<p>Sidebar</p>
</aside>
<main>
<article>1</article>
<article>2</article>
<article>11</article>
</main>
<footer>
<p>Copyright 2018</p>
</footer>
</body>
</html> Kami menggunakan semantik HTML untuk menentukan tajuk, sidebar, badan, dan bahagian kaki halaman. Di bahagian utama, kami menggunakan tag <article> untuk menambah satu set item. <article> adalah tag semantik HTML5 yang boleh digunakan untuk membungkus kandungan bebas dan mandiri. Halaman tunggal boleh mengandungi sebilangan tag <article>.
Ini adalah tangkapan skrin halaman pada peringkat ini:
di kepala dokumen dan tambahkan gaya berikut: <style>
body {
background: #12458c;
margin: 0rem;
padding: 0px;
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
"Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
}
header {
text-transform: uppercase;
padding-top: 1px;
padding-bottom: 1px;
color: #fff;
border-style: solid;
border-width: 2px;
}
aside {
color: #fff;
border-width:2px;
border-style: solid;
float: left;
width: 6.3rem;
}
footer {
color: #fff;
border-width:2px;
border-style: solid;
clear: both;
}
main {
float: right;
width: calc(100% - 7.2rem);
padding: 5px;
background: hsl(240, 100%, 50%);
}
main > article {
background: hsl(240, 100%, 50%);
background-image: url('https://source.unsplash.com/daily');
color: hsl(240, 0%, 100%);
border-width: 5px;
}Kami menggunakan terapung untuk meletakkan sidebar ke kiri, letakkan badan utama ke kanan, dan tetapkan lebar bar sisi ke lebar
6.3rem tetap. Kemudian, kami mengira dan menetapkan lebar baki bahagian badan menggunakan fungsi CSS . Bahagian utama mengandungi perpustakaan projek yang dianjurkan ke dalam blok menegak. calc()
susun atur tidak sempurna. Sebagai contoh, ketinggian bar sisi adalah berbeza dari ketinggian bahagian kandungan utama. Terdapat pelbagai teknik CSS yang dapat menyelesaikan masalah ini, tetapi kebanyakannya adalah tip atau penyelesaian. Oleh kerana susun atur ini adalah sandaran untuk grid, ia akan dilihat oleh pengguna yang lebih sedikit dan lebih sedikit. Kejatuhan itu tersedia dan cukup baik.
Versi terkini Chrome, Firefox, Edge, Opera, dan Safari semuanya menyokong grid CSS, yang bermaksud jika pelawat anda menggunakan penyemak imbas ini, anda tidak perlu risau tentang menyediakan sandaran. Anda juga perlu mempertimbangkan penyemak imbas Evergreen. Versi terkini Chrome, Firefox, Edge dan Safari adalah pelayar malar hijau. Iaitu, mereka akan mengemas kini secara automatik dan diam -diam tanpa mendorong pengguna. Untuk memastikan susun atur anda berfungsi dengan baik di setiap penyemak imbas, anda boleh memulakan dengan sandaran lalai berasaskan terapung dan kemudian memohon susun atur grid moden menggunakan teknik peningkatan progresif. Pengguna menggunakan pelayar yang lebih tua tidak akan mendapat pengalaman yang sama, tetapi itu cukup baik.
Peningkatan Progresif: Anda tidak perlu menutup segala -galanya
Apabila menambah susun atur grid CSS di atas susun atur susun atur, anda tidak perlu menulis ganti semua tag atau menggunakan gaya CSS yang berasingan:
- Dalam penyemak imbas yang tidak menyokong grid CSS, sifat grid yang anda tambahkan akan hanya diabaikan.
- Jika anda menggunakan float untuk elemen susun atur, ingatlah bahawa item grid mengambil keutamaan lebih terapung. Iaitu, jika anda menambah gaya
float: left|rightke elemen yang juga merupakan elemen grid (anak elemen induk dengan gayadisplay: grid), apungan akan diabaikan dan grid diambil. - Peraturan
@supportsboleh digunakan untuk memeriksa sokongan untuk ciri -ciri tertentu dalam CSS. Ini membolehkan kita mengatasi gaya sandaran jika perlu, sementara pelayar yang lebih tua mengabaikan blok@supports.
Sekarang, mari tambahkan grid CSS ke halaman kami. Pertama, mari kita tanda <body> sebagai bekas grid dan tetapkan lajur grid, baris, dan kawasan:
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Layout Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h2 id="CSS-Grid-Layout-Example">CSS Grid Layout Example</h2>
</header>
<aside class="sidebar">
<p>Sidebar</p>
</aside>
<main>
<article>1</article>
<article>2</article>
<article>11</article>
</main>
<footer>
<p>Copyright 2018</p>
</footer>
</body>
</html> Kami menggunakan harta display:grid untuk menandakan <body> sebagai bekas grid. Kami menetapkan jurang grid 0.1VW. GAP membolehkan anda membuat slot antara sel grid dan bukannya menggunakan margin. Kami juga menambah dua lajur menggunakan grid-template-columns. Lajur pertama mengamalkan lebar tetap 6.5 REM, dan lajur kedua menggunakan lebar sisa. fr adalah unit pecahan, dan 1FR adalah sama dengan sebahagian ruang yang ada.
Seterusnya, kami menggunakan grid-template-rows untuk menambah tiga baris. Baris pertama menggunakan ketinggian tetap 6rem, baris ketiga menggunakan ketinggian tetap 3rem, dan ruang bebas yang tersisa (1FR) diperuntukkan ke baris kedua.
Kami kemudian menggunakan grid-template-areas untuk menetapkan sel -sel maya yang dihasilkan oleh persimpangan lajur dan baris ke rantau ini. Sekarang kita perlu menggunakan grid-area untuk benar -benar menentukan kawasan -kawasan yang dinyatakan dalam templat kawasan:
body {
background: #12458c;
margin: 0rem;
padding: 0px;
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
"Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
}
header {
text-transform: uppercase;
padding-top: 1px;
padding-bottom: 1px;
color: #fff;
border-style: solid;
border-width: 2px;
}
aside {
color: #fff;
border-width:2px;
border-style: solid;
float: left;
width: 6.3rem;
}
footer {
color: #fff;
border-width:2px;
border-style: solid;
clear: both;
}
main {
float: right;
width: calc(100% - 7.2rem);
padding: 5px;
background: hsl(240, 100%, 50%);
}
main > article {
background: hsl(240, 100%, 50%);
background-image: url('https://source.unsplash.com/daily');
color: hsl(240, 0%, 100%);
border-width: 5px;
} Kebanyakan kod balik tidak mempunyai kesan sampingan pada grid CSS, kecuali untuk lebar bahagian badan width: calc(100% - 7.2rem);, yang mengira lebar baki bahagian badan selepas menolak lebar sidebar ditambah ruang margin/pengisian.
Ini adalah tangkapan skrin hasilnya. Sila ambil perhatian bahawa kawasan utama tidak menduduki semua lebar yang tinggal:
apabila menyokong grid: width: auto;
body {
/*...*/
display: grid;
grid-gap: 0.1vw;
grid-template-columns: 6.5rem 1fr;
grid-template-rows: 6rem 1fr 3rem;
grid-template-areas: "header header"
"sidebar content"
"footer footer";
}
Tambah mesh bersarang
Elemen kanak -kanak grid itu sendiri boleh menjadi bekas grid. Mari kita tetapkan bahagian utama sebagai bekas grid:
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Layout Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h2 id="CSS-Grid-Layout-Example">CSS Grid Layout Example</h2>
</header>
<aside class="sidebar">
<p>Sidebar</p>
</aside>
<main>
<article>1</article>
<article>2</article>
<article>11</article>
</main>
<footer>
<p>Copyright 2018</p>
</footer>
</body>
</html> Kami menggunakan jurang grid 0.1VW dan gunakan fungsi repeat(auto-fill, minmax(12rem, 1fr)); untuk menentukan lajur dan baris. Pilihan auto-fill cuba mengisi ruang bebas dengan seberapa banyak lajur atau baris yang mungkin, dan mewujudkan lajur atau baris tersirat jika diperlukan. Jika anda ingin meletakkan lajur atau baris yang ada ke dalam ruang yang ada, anda perlu menggunakan auto-fit. Baca penjelasan yang baik mengenai perbezaan antara auto-fill dan auto-fit.
Ini adalah tangkapan skrin hasilnya:
, grid-column dan grid-row kata kunci span
dan grid-column, yang membolehkan anda mencari item grid dalam grid induk menggunakan garisan grid. Mereka adalah singkatan untuk sifat berikut: grid-row
- : Tentukan kedudukan permulaan item grid dalam baris grid
grid-row-start - : Tentukan kedudukan akhir item grid dalam baris grid
grid-row-end - : Tentukan kedudukan permulaan item grid dalam lajur grid
grid-column-start - : Tentukan kedudukan akhir item grid dalam lajur grid
grid-column-end
untuk menentukan berapa lajur atau baris untuk rentang. span
body {
background: #12458c;
margin: 0rem;
padding: 0px;
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
"Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
}
header {
text-transform: uppercase;
padding-top: 1px;
padding-bottom: 1px;
color: #fff;
border-style: solid;
border-width: 2px;
}
aside {
color: #fff;
border-width:2px;
border-style: solid;
float: left;
width: 6.3rem;
}
footer {
color: #fff;
border-width:2px;
border-style: solid;
clear: both;
}
main {
float: right;
width: calc(100% - 7.2rem);
padding: 5px;
background: hsl(240, 100%, 50%);
}
main > article {
background: hsl(240, 100%, 50%);
background-image: url('https://source.unsplash.com/daily');
color: hsl(240, 0%, 100%);
border-width: 5px;
}
menggunakan utiliti penjajaran grid
Kami mahu memusatkan teks dalam tajuk, sidebar dan footer, dan nombor dalam elemen
.
<article> grid CSS menyediakan enam sifat
, justify-items, align-items, justify-content, align-content, justify-self, dan align-self yang boleh digunakan untuk menyelaraskan dan menyesuaikan item grid . Mereka sebenarnya adalah sebahagian daripada modul penjajaran kotak CSS.
Tambahkan yang berikut dalam header, aside, article dan footer pemilih:
body {
/*...*/
display: grid;
grid-gap: 0.1vw;
grid-template-columns: 6.5rem 1fr;
grid-template-rows: 6rem 1fr 3rem;
grid-template-areas: "header header"
"sidebar content"
"footer footer";
}-
justify-itemsdigunakan untuk menyesuaikan item grid di sepanjang paksi baris atau arah mendatar. -
align-itemsAlign item grid di sepanjang paksi lajur atau arah menegak. Mereka semua boleh mengambilstart,end,center, danstretchnilai.
Ini adalah tangkapan skrin selepas elemen berpusat:
susun atur demo kami adalah mudah untuk skrin sederhana dan besar, tetapi mungkin bukan cara terbaik untuk membina halaman untuk peranti skrin kecil. Dengan grid CSS, kita dapat dengan mudah mengubah struktur susun atur ini untuk secara linearize dalam peranti kecil -dengan mentakrifkan semula kawasan grid dan menggunakan pertanyaan media.
Berikut adalah tangkapan skrin sebelum menambahkan kod untuk membina semula susun atur pada peranti kecil:
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Layout Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h2 id="CSS-Grid-Layout-Example">CSS Grid Layout Example</h2>
</header>
<aside class="sidebar">
<p>Sidebar</p>
</aside>
<main>
<article>1</article>
<article>2</article>
<article>11</article>
</main>
<footer>
<p>Copyright 2018</p>
</footer>
</body>
</html>
Perhatikan bahawa lebar bar sisi tidak mengisi lebar yang ada. Ini disebabkan oleh kod sandaran, jadi yang perlu kita lakukan ialah menggunakan
pada penyemak imbas yang dibolehkan grid
width: auto;
width: 6.3rem; Ini adalah tangkapan skrin hasil akhir:
body {
background: #12458c;
margin: 0rem;
padding: 0px;
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
"Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
}
header {
text-transform: uppercase;
padding-top: 1px;
padding-bottom: 1px;
color: #fff;
border-style: solid;
border-width: 2px;
}
aside {
color: #fff;
border-width:2px;
border-style: solid;
float: left;
width: 6.3rem;
}
footer {
color: #fff;
border-width:2px;
border-style: solid;
clear: both;
}
main {
float: right;
width: calc(100% - 7.2rem);
padding: 5px;
background: hsl(240, 100%, 50%);
}
main > article {
background: hsl(240, 100%, 50%);
background-image: url('https://source.unsplash.com/daily');
color: hsl(240, 0%, 100%);
border-width: 5px;
}
pautan codepen 
Dalam tutorial ini, kami membuat susun atur demo responsif menggunakan grid CSS. Kami menunjukkan menggunakan kod sandaran untuk pelayar yang lebih tua, langkah demi langkah menambah grid CSS, membina semula susun atur dalam peranti kecil, dan menggunakan elemen pusat atribut penjajaran.
Soalan Lazim mengenai susun atur grid CSS moden yang mudah dan responsif
Apakah perbezaan antara grid CSS dan Flexbox? Grid CSS dan Flexbox adalah kedua -dua sistem susun atur yang kuat dalam CSS. Walaupun mereka boleh digunakan secara bergantian dalam beberapa kes, mereka masing -masing mempunyai kelebihan unik mereka sendiri. Flexbox adalah model susun atur satu dimensi yang sangat sesuai untuk memberikan item di sepanjang lajur atau baris. Grid CSS, sebaliknya, adalah sistem susun atur dua dimensi yang sesuai untuk mengatur unsur-unsur dalam baris dan lajur pada masa yang sama. Ia sesuai untuk mewujudkan susun atur web yang kompleks.
bagaimana membuat susun atur grid CSS saya responsif?
grid CSS menjadikannya mudah untuk membuat susun atur responsif tanpa pertanyaan media. Anda boleh menggunakan unit
, yang mewakili sebahagian ruang yang tersedia dalam bekas grid. Sebagai contoh, jika anda mahu tiga lajur monospace, anda boleh menggunakan. Lajur akan mengubah saiz secara automatik agar sesuai dengan skrin.
Bolehkah saya menggunakan grid css dan flexbox bersama -sama? fr
grid-template-columns: 1fr 1fr 1fr Ya, grid CSS dan Flexbox boleh digunakan bersama untuk susun atur. Anda boleh menggunakan grid CSS untuk membuat susun atur halaman keseluruhan dan kemudian gunakan Flexbox untuk susun atur komponen individu atau bahagian dalam sel grid. Gabungan ini membolehkan tahap fleksibiliti dan kawalan yang tinggi ke atas susun atur.
Bagaimana untuk menyelaraskan item dalam grid CSS?
Grid CSS menyediakan beberapa sifat untuk menyelaraskan item, termasuk justify-items, align-items, justify-self, dan align-self. Ciri -ciri ini boleh digunakan untuk menyelaraskan item di sepanjang paksi baris (Align) atau paksi lajur (Align). Sebagai contoh, justify-items: center akan memusatkan item di sepanjang paksi garis.
Bagaimana untuk membuat jurang antara projek grid?
anda boleh menggunakan harta grid-gap dan grid-row-gap. Sebagai contoh, grid-column-gap akan membuat jurang 20px antara semua item grid. grid-gap: 20px
Bagaimanakah kata kunci
dan auto-fill berfungsi dalam grid CSS? auto-fit
Kata kunci
dan auto-fill digunakan dengan fungsi auto-fit dalam sifat grid-template-columns dan grid-template-rows. repeat() Gunakan sebanyak mungkin item untuk mengisi baris atau lajur, dan buat sel kosong jika terdapat item yang tidak mencukupi. auto-fill berkelakuan sama, tetapi ia runtuh sel kosong, menjadikan item meregangkan untuk mengisi baris atau lajur. auto-fit
Dalam grid CSS, anda boleh bertindih dengan meletakkan item pada sel grid yang sama atau memilikinya merangkumi pelbagai sel. Anda boleh menggunakan atribut
untuk mengawal susunan item tumpang tindih. z-index
grid CSS disokong oleh semua pelayar moden seperti Chrome, Firefox, Safari, dan Edge. Walau bagaimanapun, Internet Explorer tidak menyokongnya. Jika anda perlu menyokong Internet Explorer, anda mungkin perlu menggunakan susun atur sandaran.
Bagaimana untuk membuat grid bersarang dalam grid CSS?
anda boleh membuat mesh bersarang dengan menetapkan item mesh itu sendiri sebagai bekas mesh. Hanya gunakan
untuk projek grid anda dan tentukan susun atur grid seperti yang anda lakukan untuk sebarang bekas grid. display: grid
anda boleh menggunakan sifat
dan grid-template-rows untuk mengawal saiz trek grid (baris dan lajur). Anda boleh menentukan saiz menggunakan pelbagai unit, seperti piksel (px), peratusan (%), atau pecahan (FR). grid-template-columns
Atas ialah kandungan terperinci Susun atur grid CSS moden yang mudah dan responsif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Vue 3
Apr 02, 2025 pm 06:32 PM
Ia ' s! Tahniah kepada pasukan Vue untuk menyelesaikannya, saya tahu ia adalah usaha besar dan lama datang. Semua dokumen baru juga.
Membina aplikasi Ethereum menggunakan redwood.js dan fauna
Mar 28, 2025 am 09:18 AM
Dengan pendakian harga bitcoin baru -baru ini lebih dari 20k $ USD, dan baru -baru ini melanggar 30k, saya fikir ia patut mengambil menyelam yang mendalam kembali ke dalam mewujudkan Ethereum
Bolehkah anda mendapatkan nilai harta CSS yang sah dari penyemak imbas?
Apr 02, 2025 pm 06:17 PM
Saya mempunyai seseorang yang menulis dengan soalan yang sangat legit ini. Lea hanya blog tentang bagaimana anda boleh mendapatkan sifat CSS yang sah dari penyemak imbas. That ' s seperti ini.
Kad yang disusun dengan kedudukan melekit dan sasaran sass
Apr 03, 2025 am 10:30 AM
Pada hari yang lain, saya melihat sedikit ini sangat indah dari laman web Corey Ginnivan di mana koleksi kad timbunan di atas satu sama lain semasa anda menatal.
Membandingkan penyemak imbas untuk reka bentuk responsif
Apr 02, 2025 pm 06:25 PM
Terdapat beberapa aplikasi desktop ini di mana matlamat menunjukkan laman web anda pada dimensi yang berbeza pada masa yang sama. Oleh itu, anda boleh menulis
Menggunakan Markdown dan Penyetempatan di Editor Blok WordPress
Apr 02, 2025 am 04:27 AM
Jika kita perlu menunjukkan dokumentasi kepada pengguna secara langsung dalam editor WordPress, apakah cara terbaik untuk melakukannya?
Kenapa kawasan -kawasan yang dikurangkan ungu di susun atur flex tersilap dianggap sebagai 'ruang limpahan'?
Apr 05, 2025 pm 05:51 PM
Soalan mengenai kawasan slash ungu dalam susun atur flex Apabila menggunakan susun atur flex, anda mungkin menghadapi beberapa fenomena yang mengelirukan, seperti dalam alat pemaju (D ...
