Mendesain semula susun atur tumblr berasaskan kad dengan grid CSS

Tutorial ini menunjukkan cara membuat susun atur kad berasaskan grid yang diilhamkan oleh reka bentuk Tumblr menggunakan grid CSS, dengan sandaran untuk pelayar yang lebih tua menggunakan terapung. Kami akan membina susun atur yang memaparkan kad header dan beberapa kad topik, masing -masing mengandungi imej dan tajuk.

Reka bentuk akhir akan responsif sepenuhnya, menyesuaikan diri dengan saiz skrin yang berbeza sambil mengekalkan daya tarikan visual yang konsisten. Fungsi pemilihan topik akan

tidak dilaksanakan dalam tutorial ini; Kami memberi tumpuan semata -mata pada susun atur grid visual.

Ciri -ciri Utama:

CSS Grid:
• Enjin susun atur utama untuk responsif dan fleksibiliti.
fallback terapung:
• Memastikan keserasian dengan pelayar yang lebih tua yang tidak menyokong grid CSS.
sass:
• digunakan untuk gaya yang cekap dengan pembolehubah dan campuran.
Elemen interaktif:
• Hover dan kesan fokus untuk pengalaman pengguna yang lebih baik.
kebolehcapaian:
• navigasi papan kekunci dipertimbangkan.
Keserasian penyemak imbas:
• menangani isu -isu yang berpotensi dengan ciri -ciri seperti dan . object-fit :focus-within

Struktur markup:

HTML terdiri daripada senarai yang tidak teratur (

) dengan kelas "grid" yang mengandungi item senarai ( <p> </p>) yang mewakili kad individu. Setiap Kad Topik () termasuk pautan () membungkus tajuk (<ul></ul>) dan imej ( <img src="https://img.php.cn/" alt="REDESIGNING Susun atur tumblr berasaskan kad dengan grid CSS "> <code><li> & lt;!-lebih banyak kad topik-& gt; <li class="card"> <a></a> <h2></h2> <img src="https://img.php.cn/" alt="Redesigning a Card-based Tumblr Layout with CSS Grid "> <!-- More topic cards --> pelaksanaan susun atur (grid CSS):

Susun atur grid CSS ditakrifkan menggunakan pembolehubah SASS untuk mengekalkan dan respons:

Styling kad:

<code class="language-scss">$item-size: 210px;
$col-gutter: 10px;
$vp-gutter: $col-gutter;
$max-cols: 5;

.grid {
  display: grid;
  grid-gap: $col-gutter;
  padding: 0 $vp-gutter;
  grid-template-columns: repeat(auto-fill, $item-size);
  grid-auto-rows: $item-size;
  max-width: grid-width($max-cols); // Function defined below
  justify-content: center;
  margin: 40px auto;
}

@function grid-width($num-cols) {
  @return $num-cols * $item-size + ($num-cols - 1) * $col-gutter;
}

// Media queries (Sass mixin) to handle header card spanning
@mixin when-n-cols($n) {
  @media screen and (min-width: #{grid-width($n) + 2 * $vp-gutter + $scrollbar-size}) {
    @content;
  }
}

@include when-n-cols(2) {
  .grid .header {
    grid-row: span 2;
    grid-column: span 2;
  }
}

// ... (Styling for cards and header) ...</code>

Gaya CSS Kad, memastikan imej meliputi seluruh kawasan kad menggunakan , dan menambah overlay kecerunan radial untuk kontras yang lebih baik. Hover interaktif dan kesan fokus dilaksanakan menggunakan peralihan

dan CSS. Garis besar sandaran disediakan untuk penyemak imbas yang kurang

sokongan. object-fit: cover transform: scale() :focus-within float fallback:

Untuk penyemak imbas tanpa sokongan grid CSS, susun atur sandaran menggunakan terapung dilaksanakan. Ini memastikan penampilan dan tingkah laku yang sama. Susun atur terapung menggunakan pertanyaan media untuk menyesuaikan bilangan lajur berdasarkan saiz skrin. Peraturan @supports memastikan bahawa susun atur terapung hanya terpakai apabila grid CSS tidak disokong.

Garis terperinci ini memberikan pemahaman yang komprehensif mengenai pendekatan tutorial. Kod lengkap, termasuk Sass Mixins dan Fungsi, akan terlalu luas untuk dimasukkan ke sini, tetapi coretan yang disediakan menggambarkan konsep dan teknik teras yang digunakan untuk membina susun atur kad responsif ini. Merujuk contoh codepen asal akan memberikan pelaksanaan lengkap.

Atas ialah kandungan terperinci Mendesain semula susun atur tumblr berasaskan kad dengan grid CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!