Buat tata letak responsif dengan grid CSS

Sep 14, 2025

Bagaimana caranya

Layout Grid CSS. tumbuh di dukungan browser setiap hari dan kami dapat mengirimkan jaringan CSS ke produksi. Adopsi cepat grid CSS telah benar-benar luar biasa.

Sebelum kita membuat tata letak situs portofolio responsif dengan CSS Grid, mari kita hapus beberapa hal: CSS Grid bukan pengganti FlexBox . Ini bahkan bukan pengganti untuk mengapung. Bahkan, Anda mungkin menyadari bahwa kami telah menggunakan FlexBox untuk melakukan hal-hal yang dilakukan CSS Grid jauh lebih baik. Tetapi alih-alih berpikir dalam hal penggantian, kita dapat berpikir dalam hal kombinasi.

15 tutorial desain web responsif yang sangat berguna

Bayangkan sandwich selai kacang dan jeli. Selai kacang dan jeli cukup besar sendiri, tetapi ketika mereka berkumpul, hal baru lahir dan sihir terjadi.

Inilah yang kita Tata Letak Situs Web Alatnya seperti. Mereka hebat pada hal-hal yang mereka lakukan secara individual, tetapi ketika mereka digabungkan, keajaiban terjadi dan kita dapat membuat tata letak yang baru dan menarik. Dalam hal ini, kami akan membuat pengembangan web PB & amp; j kami sendiri dengan css grid dan flexbox. Ingin menyederhanakan proses Anda lebih jauh? Pilih yang layak Pembangun Situs Web .

01. Siapkan markup Anda

case study title repeated — Tata letak kami tidak terlihat seperti banyak, tetapi kerangka dengan enam item kami ada di tempatnya

Dalam tutorial ini, kita akan menggunakan Grid CSS dan FlexBox bersama untuk menciptakan tata letak portofolio yang responsif. Masing-masing kotak ini adalah ukuran yang berbeda, beberapa di antaranya melintasi baris dan setiap kotak memiliki judul yang berada di bagian bawah. Kami akan menggunakan beberapa alat penyelarasan hebat yang datang dengan Flexbox untuk mewujudkannya.

Mari kita mulai dengan mengatur markup kami.

 & lt; ul kelas = "kotak" & gt;
  & lt; li & gt;
    & lt; div class = "boxes__text-wrapper" & gt;
      & lt; h2 & gt; judul studi kasus & lt; / h2 & gt;
      & lt; p & gt; deskripsi yang menarik untuk studi kasus kami. Kami bekerja keras. & Lt; / p & gt;
    & lt; / div & gt;
  & lt; / li & gt;
& lt; / ul & gt;

Kami akan menduplikasi item daftar itu dan semuanya di dalamnya enam kali sehingga kami memiliki item untuk dimainkan. Jika Anda bertanya-tanya, kami telah memutuskan untuk menggunakan ule elemen di sini karena ini adalah daftar entri. Jangan ragu untuk menggunakan apa pun yang terasa sesuai dengan Anda.

Di dalam item daftar kita punya jaman dengan kelas .boxes__text-pembungkus Itu akan berisi judul studi kasus dan deskripsi yang menyertainya.

02. Tulis gaya dasar

case study title with different styling — Kami telah mengatur font kami menjadi sesuatu yang sedikit lebih baik dan menghapus margin default dari judul dan paragraf

Sekarang mari kita atur beberapa gaya dasar untuk dikerjakan.

 tubuh {
  Font-Family: Avenir, Sans-Serif;
  MARGIN: 2REM AUTO;
  Lebar: 95%;
}
H2,
p {
  MARGIN: 0;
}
ul {
  Daftar-Gaya: Tidak Ada;
  Padding: 0;
  MARGIN: 0;
}
.boxes & gt; * {
  Padding: .5Rem;
  Latar Belakang - Warna: # 333;
  warna putih;
}

Kami telah mengubah font menjadi Avenir. Kami akan menghapus margin dari judul dan paragraf kami, dan mengatur ulang daftar tidak terurut. Kami juga akan memberikan setiap daftar item beberapa gaya default untuk membantu kami melihat di mana masing-masing.

03. Siapkan grid Anda

case study title with gaps between them — Dengan hanya tiga baris, kami telah menambahkan selokan antara barang-barang grid kami dan membuatnya sedikit lebih tinggi

Kami ingin membangun tata letak kami untuk seluler terlebih dahulu. Menyiapkan grid kami di layar kecil semudah ini:

 .boxes {
  Tampilan: grid;
  Grid-Auto-Rows: Minmax (125px, AUTO);
  Gangguan Grid: .5Rem;
}

Grid akan menumpuk barang-barang kami di atas satu sama lain karena secara default hanya ada satu kolom. Kami akan membuat ruang antara setiap studi kasus dengan menggunakan Grid-Gap. - Ini memungkinkan kami menambahkan selokan antara baris dan kolom.

Lupakan menambahkan margin ke kolom hanya untuk membutuhkan kompleks NTH-ANAK pemilih; Tarter hanya muncul di antara kolom atau baris, tidak pernah setelah atau sebelum kolom atau baris.grid-gap. adalah singkatan dari Grid-Column-Gap dan celah-baris . Biasanya kami akan menggunakan Longhand, tetapi kami akan menimpa keduanya karena browser tumbuh jadi kami akan menggunakan steno.

Selanjutnya, kita akan menggunakan Grid-Auto-Rows untuk memberi tahu wadah grid kami ketinggian baris baru. Grid akan membuat baris baru untuk menempatkan semua konten kami. Kita dapat mengontrol ukuran baris yang dibuat secara otomatis dengan Grid-Auto-Rows Properti. Kami menggunakan fungsi baru yang tersedia untuk kami: minmax () . Dengan minmax () Kami dapat menentukan ukuran minimum dan ukuran maksimum.

Dengan kode kami, kami mengatakan bahwa kami ingin baris kami menjadi minimal 120px dan maksimum otomatis. Kami menggunakan otomatis di sini karena kami ingin baris kami tumbuh jika konten menjaminnya.

04. Menyiapkan kompatibilitas browser besar

case study title in a row — Kisi kami terbentuk! Kami memiliki enam kolom untuk bekerja dengan dan lebih sedikit selokan antara item grid kami

Mari kita atur halaman kami sehingga ketika browser kami 40EM atau lebih besar, wadah grid kami memiliki enam kolom masing-masing satu fraksi.

 Layar @Media dan (Lebar min: 40EM) {
  .boxes {
    Template-template-kolom: ulangi (6, 1fr);
    Grid-Gap: 2px;
  }
}

kolom grid-template Apakah properti yang kami gunakan untuk memberi tahu grid kami berapa banyak kolom yang harus ada. Itu menerima semua unit panjang yang kita tahu dan suka seperti rem , em , px. , persentase, VW. , vh. dan fr. .

Itu fr. adalah unit baru yang kami dapatkan dengan tata letak grid CSS. Dengan itu, kita dapat memberitahu browser untuk melakukan matematika bukannya kita - sangat baik.

Dengan memberi tahu browser untuk membuat enam kolom satu fraksi, browser akan menghitung lebar wadah grid kami dan membaginya menjadi enam kolom yang sama. Juga, karena grid pintar, itu hanya akan membagi ruang yang tersisa setelah menghitung selokan yang kami tentukan.

05. Gaya item individual

case study title with an image behind — Kopi membuat semuanya terlihat lebih bagus bukan? Juga gradien halus membuat judul dan deskripsi kami menonjol

Studi kasus kami terlihat sedikit menjemukan hanya dengan kotak abu-abu. Mari kita tambahkan gambar latar belakang, dapatkan judul kami untuk ditampilkan di bagian bawah kotak ini dan tambahkan gradien sehingga judul kami menonjol.

. Kotak Li {
  gambar latar belakang:
    Linear-Gradient (RGBA (0,0,0,0), RGBA (0,0,0,0,8)),
    URL (PATH / TO / IMAGE);
  ukuran latar belakang: penutup;
  Tampilan: Flex;
  Align-Item: Flex-end;
}

Gambar latar belakang ini adalah gambar gratis dari Unsplash. , tetapi jangan ragu untuk menggunakan gambar mana pun yang Anda inginkan. Saya juga membawa FlexBox ke dalam campuran untuk menyelaraskan teks kami ke bagian bawah kotak kami. Anda belum akan melihatnya, tetapi ketika kami menempatkan setiap kotak yang berbeda, Anda akhirnya akan melihatnya bekerja.

06. Tempatkan item di grid

case study title with one image above and five below — Grid membuatnya mudah untuk ukuran barang-barang grid kami namun kami mau. Tapi ini hanya awal

Sayangnya, grid tidak memiliki cara untuk secara otomatis menempatkan item dalam tata letak grid yang kami lihat di awal. Untungnya bagi kita, bagaimanapun, Grid memberi kita alat untuk melakukannya secara manual dengan mudah. Dalam tutorial ini, kami akan menggunakan NTH-Child untuk menempatkan setiap item daftar. Di situs web produksi, kami akan menyarankan untuk menggunakan kelas itu, mengingat perencanaan yang benar, dapat memungkinkan untuk mengotomatisasi tata letak seperti ini di situs konten-berat.

Mari kita mulai dengan item pertama kami.

 Layar @Media dan (Lebar min: 40EM) {
  .boxes Li: Nth-child (1) {
    Grid-Column: 1 / -1;
    Grid-Row: Span 3;
  }
}

Kami akan menempatkan semua gaya penempatan kami di dalam kueri media yang kami tulis sebelumnya karena kami ingin tata letak ini terjadi setelah browser kami 40EM atau lebih besar. Dengan NTH-ANAK Kami menargetkan item daftar pertama. CSS Grid memungkinkan kami dengan mudah menempatkan barang kami dengan kolom grid dan baris grid. Ada banyak cara berbeda untuk menentukan di mana item seharusnya, tetapi di sini kita memberi tahu item kita untuk memulai pada garis kolom dan menjangkau seluruh wadah dengan -1.

Kemudian, dengan Grid-Row, kami memberi tahu item untuk menjangkau tiga baris. Bagaimana kita tahu bahwa tiga baris akan menjadi ukuran yang kita inginkan? Nah, kami menentukan ukuran baris ini dengan baris grid-auto beberapa saat yang lalu, dan jika kami tidak senang dengan mereka, kami dapat mengubah ukuran minimum.

Mari kita letakkan sisa barang kita.

Layar @Media dan (Lebar Min-Lebar: 40EM) {
  .boxes Li: Nth-child (2) {
    Grid-Column: Span 2;
    Grid-Row: Span 7;
  }

  .boxes Li: Nth-child (3) {
    Grid-Column: Span 4;
    Grid-Row: Span 3;
  }

  .boxes Li: Nth-child (4) {
    Grid-Column: Span 2;
    Grid-Row: Span 4;
  }

  .boxes Li: Nth-child (5),
  .boxes Li: Nth-child (6) {
    Grid-Column: Span 2;
    Grid-Row: Span 2;
  }
}

Bukankah itu luar biasa berapa banyak tata letak grid yang diberikan kepada kita? Dengan hanya beberapa baris kode, kita dapat menyusun tata letak yang sepenuhnya responsif yang tidak akan pecah jika ada lagi item yang ditambahkan.

Tentu, mereka mungkin terlihat sedikit miring karena mereka hanya akan mengambil satu kolom grid dan baris secara default, tetapi itu tidak merusak tata letak kami. Jika kami melakukan ini dengan mengapung, dan lebar dan ketinggian tetap, kami akan mengikat jika lebih banyak konten ditambahkan.

finished layout with different images in different places — Tata letak jadi kami! Bukankah ini luar biasa? Grid memungkinkan kita untuk menempatkan barang-barang kita dengan mudah dalam dua dimensi

Selangkah cepat tentang browser yang lebih tua

Ok, sudah waktunya untuk mengatasi gajah di kamar. 'Bagaimana dengan browser yang lebih tua? "Jawaban untuk pertanyaan ini sama dengan fitur baru dalam CSS: Gunakan permintaan fitur dan merangkul kaskade. Permintaan fitur adalah Didukung dengan sangat baik , dan di mana mereka tidak, kita dapat menempatkan fallback kita terlebih dahulu. Misalnya, kami akan menulis sesuatu di sepanjang garis:

. Selector Anda {
  Tampilan: Flex;
}

/ * Kode grid Anda * /
@Support (tampilan: grid) {
  Tampilan: grid;
  Kotak-template-kolom: ulangi (3, 1fr);
  Grid-Gap: 1REM 2REM;
}

Menulis kode kami dengan cara ini berarti bahwa jika browser memahami tata letak grid, itu akan menggunakannya alih-alih FlexBox. Juga, karena kami merangkul kaskade, browser yang tidak mengerti permintaan fitur akan mengabaikannya dan sudah memiliki informasi yang mereka butuhkan. Kita mungkin perlu merencanakan bagaimana kita menulis gaya kita sedikit lebih dari biasanya, tetapi dengan melakukannya kita dapat membuat tata letak yang tampak hebat dengan fitbacks yang masuk akal. Jika Anda ingin menyimpan halaman lama Anda, ekspor sebagai PDF dan simpan di penyimpanan awan .

Juga, seiring berjalannya waktu, hanya akan ada lebih banyak dukungan untuk jaringan CSS. Hanya berpikir betapa hebatnya nantinya untuk menghapus fallbacks kami dan meninggalkan semua CSS terkait grid. Ketika Anda mempelajari lebih lanjut tentang Grid, Anda akan menyadari bahwa itu melakukan banyak hal yang kami lakukan sekarang dengan lebih sedikit baris CSS. Ingat, jika Anda punya situs yang sangat kompleks, Anda hosting web. Layanan harus siap.

Artikel ini awalnya muncul di Net Magazine. , majalah terkemuka dunia untuk pengembang dan desainer web. Berlangganan di sini .

Baca lebih lajut:

Rahasia Layout Grid CSS diungkapkan
30 alat desain web untuk mempercepat alur kerja Anda
Tata letak Fashion Fleksibel dengan Kotak CSS

Buat tata letak responsif dengan grid CSS

01. Siapkan markup Anda

02. Tulis gaya dasar

03. Siapkan grid Anda

04. Menyiapkan kompatibilitas browser besar

05. Gaya item individual

06. Tempatkan item di grid

Selangkah cepat tentang browser yang lebih tua

Bagaimana caranya - Artikel Terpopuler

Cara Bersihkan PaintBrush: Panduan Definitif

Cara Membuat Simulasi Air

Desainer Affinitas: Cara Menggunakan Kendala

Cara Meningkatkan Seni Karakter Anda

Cara membawa karakter 2D ke kehidupan di VR

Dapatkan reaksi kepala Anda dengan lima faktor ini

Cara melelehkan objek 3D dengan three.js

Bagaimana cara mengembangkan makhluk mitos

Kategori