Petua Pantas: Cara menyelaraskan baris lajur dengan subgrid CSS

Tutorial subgrid grid CSS ini menunjukkan menyelaraskan kandungan dalam kotak adik. Ia menangani isu komponen dalaman yang salah dalam kotak yang diatur secara mendatar, walaupun kotak itu sendiri bersaiz menggunakan grid.

Penyelesaian memanfaatkan harta CSS Grid

. Ini membolehkan grid dalaman mewarisi struktur lajur dari grid induk mereka, memastikan penjajaran yang konsisten. subgrid

Langkah 1: Persediaan Asas

HTML menggunakan ibu bapa

yang mengandungi tiga elemen <article></article>, masing -masing dengan <section></section>, <h1></h1>, dan <ul></ul>. CSS awal menetapkan ibu bapa sebagai grid dengan tiga lajur yang sama: <div> <pre class="brush:php;toolbar:false">&lt;code class=&quot;language-css&quot;&gt;article { display: grid; grid-template-columns: 1fr 1fr 1fr; }&lt;/code&gt;</pre> <p> <s> <img src="https://img.php.cn/upload/article/000/000/000/173897521347074.jpg" alt="Quick Tip: How to Align Column Rows with CSS Subgrid "> </s></p> Langkah 2: Membolehkan subgrid <p> <strong> </strong> untuk menggunakan </p>, masing -masing <p> juga mesti menjadi grid: <code>subgrid <section></section>

ini menjadikan kandungan dalam setiap bahagian mengisi lajur masing -masing.

<code class="language-css">section {
  display: grid;
}</code>

Langkah 3: Sejajar dengan subgrid

Langkah penting adalah menetapkan dan

dalam

css: grid-template-rows: subgrid; grid-row: span 3; <section></section>

Membuat grid dalaman mewarisi struktur baris dari ibu bapa.

<code class="language-css">section {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3; /* or grid-row: 1 / 4 */
  gap: 0; /* removes inherited gap */
}</code>

Memastikan kandungan dalaman merangkumi semua baris.

membuang apa -apa jarak yang diwarisi dari grid induk. grid-template-rows: subgrid; grid-row: span 3; gap: 0;

Keserasian penyemak imbas:

Sokongan subgrid kini sangat baik di seluruh pelayar utama.

Sumber lebih lanjut:

rujukan subgrid MDN

grid dengan contoh demo subgrid

• Rachel Andrew's Subgrid YouTube Penjelasan
Versi yang lebih baik ini memberikan penjelasan yang lebih ringkas dan berstruktur, dengan memberi tumpuan kepada langkah -langkah utama dan menggabungkan imej secara langsung dalam markdown. Kesimpulannya juga menghubungkan ke sumber yang berkaitan untuk pembelajaran selanjutnya.