Memecahkan masalah dengan CSS Grid dan Flexbox: kartu UI

() translation by (you can also view the original English article)

Pola "kartu" telah melihat sukses besar dalam waktu belakangan ini, tetapi cara kami membuatnya masih terbatas karena CSS tersedia bagi kami. Sampai sekarang, itu adalah. Dengan menggabungkan CSS Grid dan Flexbox, kita dapat membuat kartu yang menyelaraskan rapi, responsif berperilaku, dan yang beradaptasi dengan konten di dalamnya. Mari kita lihat bagaimana!

Apa yang kita akan membangun

Kita akan membangun ini kartu UI (Lihat versi halaman penuh untuk ide yang lebih jelas):

Pada berbagai breakpoints pengaturan kartu akan berubah sebagai berikut:

Breakpoints of CSS Grid layout — 1: kecil, 2: media, 3: viewport besar

CSS Grid vs Flexbox

Ketika Flexbox memukul CSS adegan teriakan sukacita bisa didengar di seluruh dunia; akhirnya kami memiliki tata letak modul untuk memecahkan semua frustrasi float kami. Tapi itu tidak benar-benar terjadi. Flexbox terbaik untuk mendistribusikan unsur-unsur sepanjang sumbu tunggal; horizontal sepanjang berturut-turut atau vertikal sebagai kolom. Membangun sebuah grid yang benar-benar cairan dengan Flexbox sulit.

Grid, namun, ditujukan untuk meletakkan elemen di seluruh dua sumbu (atau dimensi); secara horizontal dan vertikal. Dalam tutorial ini kita akan menggunakan masing-masing untuk tujuan itu dimaksudkan, memberikan kita solusi yang benar-benar padat. Mari kita mulai!

Inspirasi

Bbc.co.uk meluncurkan (dalam versi beta) iteration terbaru mereka, akan bersih dan luas dengan kartu mereka UI. 5

Kartu teratas dibangun dan selaras di baris dengan Flexbox, tetapi kita akan memperluas tata letak yang menggunakan Grid.

Catatan: untuk mengikuti bersama Anda akan memerlukan browser yang mendukung Grid. Berikut ini beberapa info untuk Anda mulai.

Kami Markup kartu

Mari kita mulai dengan pembungkus untuk grid kami <div class="band">, beberapa item grid untuk mengatur segala sesuatu <div class="item">, dan beberapa jangkar (anchor setiap akan kartu):

  <div class="band">
  
    <!-- grid item, containing a card -->
    <div class="item-1">
          <a href="" class="card">
            <div class="thumb"></div>
            <article>
              <h1>Post title</h1>
              <span>Author</span>
            </article>
          </a>
    </div>
    
    <!-- grid item, containing a card -->
    <div class="item-2">
    ...
    </div>
    
    <!-- grid item, containing a card -->
    <div class="item-3">
    ...
    </div>
    
  </div>

Tempat kartu sebanyak yang Anda inginkan; Kami menggunakan tujuh. Masing-masing memiliki thumbnail <div class="thumb">yang kami akan berikan gambar latar belakang kemudian. Kemudian ada <article>, yang pada gilirannya rumah <h1>, <span> penulis, dan bahkan mungkin <p> untuk informasi lebih lanjut.

Dasar-dasar grid

Sekarang mari kita memulai beberapa gaya dengan menyusun setiap item dalam kotak.

Catatan: jika ini adalah perampokan pertama Anda ke "Grid" Anda mungkin ingin mendapatkan sampai dengan kecepatan dengan membaca tutorial awal dalam pemahaman CSS Grid Layout.

Kami akan menggunakan seluler terlebih dahulu di sini, jadi gaya pertama akan memberikan pembungkus lebar dan memusatkannya, lalu mengatur beberapa aturan Grid:

.band {
  width: 90%;
  max-width: 1240px;
  margin: 0 auto;
  
  display: grid;
  
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-gap: 20px;
}

Paling penting, di sini kami Anda menyatakan bahwa .band kami akan display: grid;. Kami kemudian menyatakan grid-template-columns 1fr, yang mengatakan bahwa setiap kolom akan mengambil sebagian kecil tunggal yang tersedia. Kami hanya telah menyatakan satu untuk sekarang, sehingga setiap kolom akan mengisi seluruh lebar.

Kemudian kita menyatakan grid-template-baris: auto;. Ini sebenarnya adalah nilai default, jadi kita bisa menghilangkannya, dan berarti ketinggian baris akan ditentukan murni oleh konten.

Akhirnya kita mendefinisikan grid-gap 20px, yang memberi kami kami Talang kolom dan baris.

Media Query Numero Uno

Di viewports yang lebih luas (500px benar-benar sewenang-wenang), kami akan mengubah grid-template-columns untuk memberi kita mungkin dua kartu per baris. Sekarang ada dua kolom, masing-masing menjadi salah satu dari dua fraksi tersedia.

@media only screen and (min-width: 500px) {
  .band {
    grid-template-columns: 1fr 1fr;
  }  
}

Media Query Numero Dos

Terakhir, untuk layar yang lebih besar kita akan pergi dengan empat kolom layout.

@media only screen and (min-width: 850px) {
  .band {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

Di sini kita bisa sama-sama ditulis repeat(4, 1fr) bukan 1fr 1fr 1fr 1fr. Untuk informasi lebih lanjut tentang bagaimana fr unit bekerja, cek keluar CSS Grid Layout: kolom fluida dan selokan yang lebih baik.

Jadi apa yang diberikan kepada kita?

Styling Kartu

Yang telah memberi kita tata letak kotak cukup padat, dan jika Anda seorang penggemar dari brutalism Anda mungkin ingin menjaga hal-hal seperti ini, tetapi untuk orang lain, mari kita membuat kartu kami terlihat sedikit lebih seperti kartu.

Kita akan mulai dengan ini:

.card {
  background: white;
  text-decoration: none;
  color: #444;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

Ini memberikan kita beberapa gaya dasar: latar belakang putih, menggarisbawahi tidak ada teks, warna abu-abu dan box-shadow rapi untuk memberikan kita beberapa kedalaman.

Selanjutnya kita mendeklarasikan kartu menjadi display: flex;. Hal ini penting-kita akan dapat menyelaraskan isi kartu vertikal, menggunakan Flexbox. Oleh karena itu kita juga menyatakan flex-direction: column; untuk memberikan kami sumbu vertikal. Akhirnya kita mendeklarasikan min-height: 100%; dalam rangka bahwa semua kartu mengisi ketinggian orangtua (item kami grid). Pekerjaan yang baik! Yang memberi kita ini:

Hover State

Mari kita membuat beberapa perbaikan sebelum menyelam lebih lanjut ke dalam Flexbox. Tambahkan position: relative; dan transition sehingga kita dapat memindahkan kartu di hover:

1	position: relative;
2	top: 0;
3	transition: all .1s ease-in;

Kemudian di hover, mengangkat kartu sedikit dan membuat bayangan lebih jelas:

1	.card:hover {
2	top: -2px;
3	box-shadow: 0 4px 5px rgba(0,0,0,0.2);
4	}

Tipografi

Sekarang kami akan menambahkan beberapa gaya umum untuk tipografi untuk mengubah warna dan spasi.

.card article {
  padding: 20px;
}

/* typography */
.card h1 {
  font-size: 20px;
  margin: 0;
  color: #333;
}

.card p { 
  line-height: 1.4;
}

.card span {
  font-size: 12px;
  font-weight: bold;
  color: #999;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 2em 0 0 0;
}

Berikut adalah apa yang Anda harus:

Thumbnail

Setiap gambar kecil akan diterapkan sebagai gambar latar belakang, jadi kami akan menambahkan beberapa markup di seluruh papan, seperti ini:

1	<div class="thumb" style="background-image: url(thumb.jpg);"></div>

Sekarang kami akan membuat yakin pada divs .thumb memiliki beberapa dimensi, dan bahwa latar belakang gambar yang mengisi mereka dengan benar:

.card .thumb {
  padding-bottom: 60%;
  background-size: cover;
  background-position: center center;
}

Pekerjaan yang baik, yang memberi kita ini:

Flexbox artikel

Sekarang kami ingin nama penulis berjajaran di bagian bawah kartu, terlepas dari berapa banyak konten yang ada di atasnya. Ini adalah tempat Flexbox lagi datang:

.card article {
  padding: 20px;
  flex: 1;
  
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

Kami menggunakan singkatan flex: 1; untuk menyatakan bahwa item flex ini (it's masih anak wadah flex asli) harus tumbuh untuk mengambil semua ruang yang tersedia.

Kemudian, kami menyatakan bahwa artikel adalah wadah flex tersendiri, dan sekali lagi kita sedang menyatakan flex-direction: column; untuk memberikan penyebaran vertikal. Terakhir, justify-content: space-between; menyatakan bahwa semua benda yang lentur di dalamnya harus tersebar merata di sepanjang sumbu, dengan jarak yang sama antara.

Itu semua hebat, tetapi itu memberi kita paragraf yang aneh dan mengembara ini di tengah-tengah kartu kami.

Untuk menyelaraskan ini dengan benar, mari tambahkan flex-grow: 1; (atau cukup flex: 1;) kepada mereka, sehingga mereka mengisi semua ruang vertikal yang tersisa, menyelaraskan diri dengan baik ke atas.

1	.card p {
2	flex: 1; /* make p grow to fill available space*/
3	line-height: 1.4;
4	}

Lebih baik!

Mengubah Grid

Pada titik ini kita cukup banyak terbungkus, tetapi satu hal yang memungkinkan Grid untuk kita lakukan sekarang adalah mengubah tata letak sepenuhnya dengan menempatkan item grid kita di mana pun kita suka, dan berapa pun ukuran yang kita suka. Untuk demo ini, kami ingin membuat kartu pertama (sebut saja "kartu unggulan" kami) dua kolom lebar untuk apa pun selain area pandang terkecil.

Di kueri media pertama kami, mari lakukan ini:

@media only screen and (min-width: 500px) {

    ...
    
  .item-1 {
    grid-column: 1/ span 2;
  }
  
}

Mengacu kembali ke tutorial pengantar kami tentang grid areas, di sini kami mengatakan bahwa, di luar 500px, item pertama harus dimulai pada garis grid 1 dan membentang di dua lintasan. Sisanya item grid jatuh ke tempatnya secara otomatis.

Dalam kueri media yang sama ini saya juga mengetuk font-size dari tajuk di kartu unggulan kami.

Kesimpulan

Ini telah menjadi latihan yang baik dalam menggunakan Grid dengan Flexbox; Grid ditangani dua dimensi tata letak kami utama, maka Flexbox ditangani distribusi vertikal unsur-unsur dalam kartu kami. Bersenang-senang bermain-main dengan itu!

Bacaan lebih lanjut

Memahami CSS Grid Layout seri tutorial
Saya harus menggunakan Grid atau Flexbox? oleh Rachel Andrew
Merancang antarmuka pengguna berbasis kartu pada Smashing Magazine
bbc.co.uk beta homepage
Quick Tip: Tambahkan @supports CSS File demo CodePen Anda