Cara Menggabungkan Grid Flexbox dan CSS untuk Tata Letak yang Efisien

Catatan editor: Posting tamu ini ditulis oleh Abbey Fitzgerald seorang insinyur perangkat lunak UX dan desainer web yang menyukai seni membuat kode.

Di masa lalu, properti float CSS adalah salah satu metode utama untuk mengatur elemen di situs web. Dan jika Anda pernah bekerja seperti itu, Anda tahu bahwa itu tidak selalu ideal untuk tata letak yang rumit. Untungnya di era desain web modern, elemen penyelarasan menjadi jauh lebih ramping berkat Flexbox dan CSS Grids.

Ketika Flexbox muncul, itu membuat penyelarasan lebih mudah dan sejak itu telah diadopsi secara luas. Tata Letak Kotak CSS juga telah menciptakan banyak kegembiraan di komunitas desain web. Beberapa waktu yang lalu, kami melihat cara membuat CSS Grid Layout dasar. Meskipun tidak diadopsi secara luas, browser mulai mendukungnya. Jika didukung penuh, ini akan berdampak besar pada desain. Dukungan browser meningkat setiap saat; pastikan untuk memeriksa Dapatkah Saya Menggunakan untuk informasi terbaru.

Sekarang Anda mungkin bertanya-tanya apa selanjutnya; lagipula, Flexbox dan CSS Grid Layouts tampaknya mencapai hasil yang serupa. Namun, ini bukan debat Flexbox versus Grid, tetapi lebih pada mempelajari cara menggunakannya bersama. Semakin saya bermain-main dengan Grid dan Flexbox, saya menemukan bahwa Anda tidak harus memilih salah satu saja. Dalam waktu dekat, ketika Tata Letak Kotak CSS memiliki dukungan browser penuh, desainer akan dapat mengambil keuntungan gabungan dari masing-masing dan membuat desain yang paling efisien dan menarik.

Menguji Layout Dasar Flexbox dan CSS Grid

Untuk menentukan apakah Flexbox atau CSS Grid berfungsi lebih baik untuk alur kerja pengembangan Anda, membuat tata letak standar yang hanya menggunakan satu atau yang lain adalah cara yang baik untuk melihat cara kerjanya dan jika ada kelebihan dari salah satunya. Kita akan mulai dengan tipe tata letak yang sangat sederhana dan sangat familiar dengan header, sidebar, konten utama, dan footer. Tata letak sederhana seperti ini adalah cara cepat untuk memposisikan berbagai elemen.

Dan ingat, Anda tidak boleh membuat perubahan di situs langsung Anda. Coba bereksperimen dengan Lokal sebagai gantinya, aplikasi pengembangan WordPress lokal gratis. Unduh hari ini!

Cara Membuat Tata Letak Dengan Flexbox

Baru-baru ini, saya membahas subjek membuat tata letak kartu Flexbox. Posting itu merinci tentang cara kerja Flexbox bersama dengan informasi CSS tertentu, jadi jika Anda seorang pemula di Flexbox, ini akan membantu Anda memahami cara kerjanya.

Untuk tutorial ini, inilah yang akan kita buat:

Lihat ini di Codepen.

Untuk tata letak dasar ini, tugas utama Flexbox meliputi:

• Buat header dan footer lebar penuh
• Posisikan sidebar di sebelah area konten utama
• Ukuran sidebar dan area konten utama yang benar
• Pemosisian elemen navigasi

Struktur dasar HTML

 <div class="wadah">
        
    <tajuk>
        <nav>
          <ul>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </nav>
        <tombol></button>
    </header>
    <div class="pembungkus">
        <selain kelas="sidebar">
            <h3></h3>
        </ samping>
        <kelas bagian="utama">
            <h2></h2>
            <p></p>
        </bagian>
    </div><!-- /wrapper -->
    <footer>
        <h3></h3>
        <p></p>
    </ footer>
</div><! -- /wadah -->

Cara menggunakan layar fleksibel

Gaya tajuk

Mulai dari luar dan bekerja di dalam, menambahkan display: flex; ke wadah adalah langkah pertama dalam tata letak Flexbox apa pun. Arah fleksibel diatur ke kolom, jadi ini akan memposisikan semua bagian di bawah satu sama lain.

 .wadah {
    tampilan: fleksibel;
    arah fleksibel: kolom;
}

Membuat header lebar penuh cukup otomatis dengan display: flex; (header adalah elemen level blok secara default). Karena deklarasi ini, akan memungkinkan penempatan yang mudah untuk elemen navigasi.

Ada logo dan dua item menu di navigasi di sebelah kiri dengan tombol login di sebelah kanan. Navigasi ada di header, jadi dengan memiliki justify-content: space-between; navigasi dan tombol akan diberi spasi secara otomatis.

Satu hal yang berguna adalah betapa mudahnya menyelaraskan teks. Dalam navigasi, dengan align-items: baseline; , semua item navigasi disejajarkan dengan garis dasar teks sehingga terlihat lebih seragam.

 judul{
    padding: 15px;
    margin-bawah: 40px;
    tampilan: fleksibel;
    justify-content: space-between;
}
tajuk nav ul {
    tampilan: fleksibel;
    menyelaraskan-item: garis dasar;
    daftar-gaya-jenis: tidak ada;
}

Gaya konten halaman

Selanjutnya, ada area sidebar dan konten utama dengan pembungkus yang menyertakan keduanya. Div dengan kelas .wrapper juga membutuhkan display: flex; tetapi arah fleksibel berbeda dari di atas. Karena sidebar dan area konten bersebelahan daripada ditumpuk, arah fleksibelnya adalah

Selanjutnya, ada area sidebar dan konten utama dengan pembungkus yang menyertakan keduanya. Div dengan kelas .wrapper juga membutuhkan display: flex; tetapi arah fleksibel berbeda dari di atas. Karena sidebar dan area konten bersebelahan daripada ditumpuk, arah fleksibelnya adalah baris, yang merupakan kebalikan dari apa yang dilakukan dalam wadah di atas.

 .wrapper {
    tampilan: fleksibel;
    arah fleksibel: baris;
} 

Ukuran bagian utama dan sidebar sangat penting karena informasi yang lebih menonjol ada di sini. Konten utama harus berukuran tiga kali lipat dari sidebar, yang cukup mudah dilakukan dengan Flexbox.

 .utama {
    lentur: 3;
    margin-kanan: 60px;
}
.sidebar {
   melenturkan: 1;
}

Untuk cuplikan kode ini, saya menggunakan steno. Nilai flex adalah untuk properti flex-grow. Pertumbuhan fleksibel sangat kuat karena ini adalah seberapa banyak item akan tumbuh relatif terhadap item fleksibel lainnya di dalam wadah yang sama.

Secara keseluruhan, Flexbox cukup efisien dalam membuat tata letak sederhana ini. Sangat membantu memiliki kontrol atas gaya item daftar dan jarak antara navigasi dan tombol.

Cara Membuat Layout Dengan CSS Grid Layouts

Untuk menguji efisiensi, langkah selanjutnya adalah membangun tata letak dasar yang sama dengan CSS Grid. Semua elemen halaman sama dan akan diposisikan dengan cara yang sama seperti contoh Flexbox.

Lihat ini di Codepen.

Area Templat Kisi

Satu hal yang berguna dengan CSS Grid adalah kemampuan untuk menentukan area template, yang dapat membuat tata letak sangat intuitif. Dengan mengambil pendekatan ini, area pada grid dapat diberi nama dan direferensikan ke item posisi. Untuk tata letak dasar ini, ada empat item yang harus kita beri nama:

• tajuk
• isi utama
• sidebar
• footer

Struktur Dasar HTML

 <div class="wadah">
        
    <tajuk>
        <nav>
          <ul>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </nav>
        <tombol></button>
    </header>
  
    <selain kelas="sidebar">
        <h3></h3>
        <ul>
            <li></li>
        	<li></li>
	<li></li>
	<li></li>
	<li></li>
          </ul>
    </ samping>
    <kelas bagian="utama">
        <h2></h2>
        <p></p>
         <p> </p>
  </bagian>
    <footer>
        <h3></h3>
        <p></p>
    </ footer>
</div>

Kami akan menentukan area ini pada wadah grid kami secara berurutan, seperti menggambarnya. Saya juga akan memberi jarak agar mudah dibaca.

 area-template-kisi:
        "tajuk tajuk"
        "utama sidebar"
        "footer footer";

Perhatikan bagaimana sidebar dicantumkan sebelum main? Mengalihkannya juga akan membuat urutan berubah pada halaman. Saat ini, sidebar ada di sebelah kiri dan konten utama ada di sebelah kanan, tetapi Anda dapat dengan mudah mengubahnya jika diperlukan.

Satu hal yang perlu diperhatikan: Nama-nama ini perlu "dihubungkan" dengan gaya. Hanya karena grid-template-areas telah dideklarasikan, kita tidak tahu di mana letak header sebenarnya. Di blok header, grid-area: header; perlu ditambahkan.

 judul{
    area-grid: tajuk;
    padding: 20px 0;
    tampilan: kisi;
    kisi-templat-kolom: 1fr 1fr;
}

Struktur HTML sama dengan contoh Flexbox, tetapi CSS sangat berbeda untuk membuat tata letak kisi.

 .wadah{
    max-width: 900px;
    warna latar belakang: #fff;
    margin: 0 otomatis;
    padding: 0 60px;
    tampilan: kisi;
    kisi-templat-kolom: 1fr 3fr;
    area-template-kisi:
        "tajuk tajuk"
        "utama sidebar"
        "footer footer";
    kisi-celah: 50px;
}

Untuk mulai bekerja dengan Layout Grid CSS, sangat penting untuk memiliki display: grid; ditetapkan pada wadah. Grid-template-columns dideklarasikan di sini untuk memberikan keseluruhan struktur halaman. Ingat bagaimana contoh Flexbox mengatur kelas .main ke flex-grow 3 dan sidebar memiliki flex-grow 1 untuk menentukan ukuran? Di sini grid-template-columns telah ditetapkan sebagai 1fr dan 3fr. Di sinilah grid terbentuk dengan satuan pecahan. Dengan nilai-nilai ini, jelas ada dua kolom dan lebarnya tidak sama. Kolom yang disetel ke 3fr tiga kali lebih lebar dari yang lain. Ini menjelaskan bagaimana sidebar tampak lebih sempit daripada area konten.

Selanjutnya, unit fr yang digunakan untuk container perlu disesuaikan untuk header. Grid-template-columns telah disesuaikan menjadi 1fr dan 1fr. Dengan begitu ada dua kolom berukuran sama dan item navigasi serta tombol akan pas.

 judul{
    area-grid: tajuk;
    tampilan: kisi;
    kisi-templat-kolom: 1fr 1fr;
} 

Untuk menempatkan tombolnya, kita hanya perlu menggunakan justify-self dan mengaturnya menjadi end.

 tombol tajuk {
    membenarkan diri sendiri: akhir;
}

Navigasi ditempatkan di tempat yang seharusnya:

 nav tajuk {
    membenarkan diri sendiri: mulai;
}

Footer lebar penuh tidak memerlukan kumpulan kolom yang berbeda karena konten berada di tengah.

Cara Membuat Layout Dengan Flexbox dan CSS Grids

Sekarang kita telah melihat apa yang dapat dilakukan masing-masing metode secara individual, sekarang saatnya untuk membuat sesuatu yang lebih kompleks dengan menggabungkan Flexbox dan CSS Grid Layouts.

Lihat ini di Codepen.

Berikut adalah garis besar dasar untuk menjalankan grid:

Lihat ini di Codepen.

Perhatikan bagaimana desain bergantung pada kolom dan baris? Tata letak ini membutuhkan hal-hal untuk berbaris dan berperilaku secara konsisten di kedua arah, sehingga menggunakan CSS Grid efisien untuk keseluruhan tata letak.

Perencanaan adalah kunci dengan tata letak seperti ini. Merupakan ide bagus untuk membuat sketsa terlebih dahulu dan melihat bagaimana semuanya menumpuk, secara harfiah. Untuk memulai kode, memiliki display: grid; sangat penting; tanpanya, menggunakan jenis tata letak ini tidak akan berfungsi. Satu hal yang perlu diperhatikan di sini adalah adanya jarak antar blok konten. Ini dicapai dengan celah-kolom-kisi dan celah-baris-kisi.

 .wadah {
  tampilan: kisi;
  grid-template-columns: 0.4fr 0.3fr 0.3fr;
  kisi-kolom-celah: 10px;
  grid-row-gap: 15px;
}

Unit pecahan kembali untuk tata letak ini dan sekarang ada tiga area yang dibutuhkan. Nilai pertama 0,4fr sedikit lebih lebar dari nilai kedua dan ketiga, yang keduanya 0,3fr.

Tata Letak Kolom dan Baris

Di sinilah penting untuk merujuk diagram dari awal. Mulai dari atas, beginilah penempatan tajuk. Ini mencakup semua kolom dan satu baris.

 .header {
  kisi-kolom-mulai: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
  warna latar belakang: #d5c9e2;
}

Jika Anda ingin menggunakan steno, nilai awal dan akhir berada di baris yang sama dan dipisahkan dengan garis miring. Ini akan terlihat seperti ini:

 .header {
  kolom-kisi: 1/4;
  kisi-baris: 1/2;
  background-color: #55d4eb;
}

Untuk menempatkan semua item lainnya, nilai kisi dan kolom yang tepat hanya perlu ditambahkan ke CSS. Daripada membahasnya di sini satu per satu, contoh ini ada di Codepen.

Setelah Tata Letak Kisi dibangun, menyempurnakan konten adalah langkah selanjutnya.

Navigasi

Flexbox sangat cocok untuk menempatkan elemen header. Contoh tata letak dasar menyentuh ini dengan justify-content: space-between. Contoh kisi harus memiliki justify-self: start; pada navigasi dan justify-self: end; untuk tombol untuk meletakkan sesuatu, tetapi Flexbox membuat jarak lebih mudah untuk navigasi.

 .header {
  kolom-kisi: 1/4;
  kisi-baris: 1/2;
  warna: #9f9c9c;
  transformasi teks: huruf besar;
  border-bottom: 2px solid #b0e0ea;
  padding: 20px 0;
  tampilan: fleksibel;
  justify-content: space-between;
  menyelaraskan-item: tengah;
} 

Format yang sama ini akan diikuti di sini. Logo, item menu, dan tombol menggunakan konten pembenaran Flexbox untuk spasi.

Kisi konten kolom

Untuk acara yang membutuhkan elemen untuk berbaris dalam satu arah, yang berarti lebih "satu dimensi", biasanya Flexbox adalah opsi yang lebih baik. Selain itu, Flexbox bagus dalam menskalakan elemen secara dinamis. Mungkin Anda sudah mencobanya di deretan kotak dengan menambahkan display:flex; pada elemen induk dan melenturkan properti pada elemen anak. Dengan teknik itu, ada garis bagus yang terbentuk dan merupakan cara yang efisien untuk memastikan semua elemen memiliki ketinggian yang sama.

Baris konten dengan teks dan tombol

Di bagian "konten tambahan", tiga area dengan teks dan tombol telah ditambahkan. Flexbox memudahkan untuk menjaga lebar set untuk tiga kolom.

 .ekstra {
  kolom-kisi: 2/4;
  baris kisi: 4/5;
  bantalan: 1rem;
  tampilan: fleksibel;
  flex-wrap: bungkus;
  perbatasan: 1px solid #ececec;
  justify-content: space-between;
}

Satu Pengecualian Flexbox

Ya, saya memang mengatakan bahwa Flexbox lebih baik untuk tata letak, kisi, atau kolom satu dimensi, tetapi Jika Anda membaca Cara menggunakan Flexbox untuk membuat posting tata letak desain kartu CSS modern, ada peretasan Flexbox "baris terakhir" yang didemonstrasikan untuk menjaga keseimbangan baris dan kolom, bahkan tanpa jumlah kartu genap.

 .gambar-terkait {
  kolom-kisi: 1/3;
  kisi-baris: 5/6;
  tampilan: kisi;
  kisi-templat-kolom: ulangi(4,1fr);
  celah jaringan: 1rem;
}
.related-images .icon {
    background-color: putih;
    fleksibel: 1 1 150px;
}

Ringkasan Pendekatan Desain

Pada dasarnya, pendekatan yang saya ambil di sini adalah memanfaatkan CSS Grid Layout untuk tata letak keseluruhan (dan apa pun yang desainnya tidak linier). Di dalam area konten grid, Flexbox digunakan untuk mengatur dan menyempurnakan gaya di dalam area grid.

Sumber daya

Ada begitu banyak sumber daya hebat di luar sana untuk Tata Letak Kotak Flexbox dan CSS, terlalu banyak untuk disebutkan. Berikut adalah beberapa yang akan membantu Anda memulai ke arah yang benar dan menginspirasi tata letak Anda.

• Cheatsheet Penyelarasan Kotak
• Lab Tata Letak Jen Simmons
• Panduan Lengkap untuk Grid
• Panduan Lengkap untuk Flexbox

Mudah-mudahan, latihan ini memberi Anda ide yang lebih baik tentang cara membuat tata letak dengan CSS Grid Layouts dan Flexbox. Apa pendapat Anda tentang teknologi baru ini? Bagaimana mereka membantu proses pengembangan Anda?