Cara Membuat Layout Sederhana dengan CSS Grid Layouts

Jika Anda pernah berkecimpung dalam desain cetak, Anda tahu dari mana ide tata letak kisi berasal. Kisi adalah alat pengukuran tepat yang digunakan untuk memposisikan elemen desain pada halaman. Ide ini sering digunakan di web untuk membuat konten terorganisir dan seragam, membuat pengalaman menonton yang lebih baik bagi pengguna Anda.

Saat praktik desain web masih baru, tata letaknya cukup sederhana. Header, sidebar, area konten, dan footer. Sekarang, seiring berkembangnya web, tata letak kami menjadi lebih kompleks dan kami memiliki lebih banyak hal yang harus dihadapi sebagai desainer web. Kami sering membutuhkan banyak wilayah konten, desain responsif, beberapa desain template tata letak halaman, di antara banyak hal lainnya. Dan untuk mengimplementasikan desain dan menampilkannya dengan benar, pelampung dan pemosisian diperlukan. Mengapung terdengar sederhana, tetapi kadang-kadang sulit untuk dikerjakan.

Untungnya, grid menyediakan cara yang lebih mudah untuk mendesain dan menampilkan konten web. Ini adalah waktu yang luar biasa untuk menjadi seorang desainer karena CSS Grid Layouts dengan cepat mendapatkan daya tarik. Mungkin terasa seperti grid telah menjadi ide baru dalam desain web dalam beberapa tahun terakhir, tapi percaya atau tidak, Tata Letak Grid CSS telah bekerja selama bertahun-tahun. Dukungan browser untuk mereka terjadi dengan sangat cepat, jadi sekarang mereka dapat membantu meringankan beberapa frustrasi seputar pemosisian yang harus dihadapi desainer selama bertahun-tahun.

Akhirnya saatnya untuk masuk ke jaringan dan menjelajahi kemungkinan desain baru!

Dukungan Kotak CSS

Itu semua tergantung pada browser yang perlu Anda dukung, tetapi ada peluang bagus bahwa Anda tidak perlu khawatir tentang "mode flag" saat menggunakan CSS Grids. Anda selalu dapat mengunjungi dokumentasi Can I Use untuk memeriksa ulang, tetapi dukungan untuk CSS Grids telah meningkat secara dramatis dan banyak desainer dapat menggunakannya dalam produksi, yang patut dirayakan!

Dasar-dasar Tata Letak Grid CSS

Dengan memanfaatkan CSS, tata letak kisi akan membantu menentukan area konten di halaman web Anda. Ada sekumpulan properti yang relatif baru yang ditentukan dalam Spesifikasi Tata Letak Grid CSS. Ini adalah sumber yang bagus untuk referensi saat mempelajari lebih lanjut tentang cara baru desain tata letak ini. Tata Letak Kotak CSS membantu menyederhanakan berbagai hal dan membuat pembuatan tata letak menjadi lebih mudah. Pikirkan grid sebagai struktur dimana pengukuran dapat didefinisikan.

Bagian dari Grid

Garis

Dalam hal ini, terdapat lima garis vertikal dan tiga garis horizontal. Garis diberi nomor mulai dari satu. Garis vertikal diperlihatkan dari kiri ke kanan dalam contoh ini, tetapi ini bergantung pada arah penulisan. Karena ini menunjukkan membaca dari kiri ke kanan, jika dari kanan ke kiri, hal-hal akan terbalik. Baris dapat diberi nama (opsional), yang membantu mereferensikannya di CSS.

Trek

Lintasan adalah ruang antara dua garis sejajar. Dalam diagram, ada empat jalur vertikal dan dua jalur horizontal. Ada upaya ganda yang hebat antara garis dan trek. Garis adalah cara yang bagus untuk referensi di mana konten dimulai dan berhenti. Trek adalah tujuan sebenarnya dari konten.

Sel

Sel ditemukan di mana jalur horizontal dan vertikal bertemu. Ada delapan sel dalam diagram.

Area

Sel berperan saat menentukan area. Area adalah bentuk persegi panjang yang dapat menjangkau sejumlah sel. Seperti garis, area dapat diberi nama secara opsional. Ada beberapa label yang disertakan dalam diagram: "A", "B", dan "C".

Membuat Tata Letak Grid

Akan sangat membantu untuk membuat sketsa sebelum memulai tata letak Anda. Tidak ada pengganti untuk kertas grafik lama yang bagus.

HTML untuk kisi

 [html] <div class="container"> <div class="grid header">Header</div> <div class="grid sidebar">Sidebar</div> <div class="grid content">Main Content</div> <div class="grid extra">Extra Content</div> <div class="grid footer">Footer</div> </div> [/html]

Wadah itu sangat penting. Di dalam wadah terdapat berbagai blok konten untuk situs web. Urutan item kisi di dalam wadah tidak menjadi masalah. Selanjutnya, kita akan menggunakan CSS untuk menempatkannya di tata letak kita.

gaya CSS

Setelah Anda selesai dengan markup HTML, deklarasi terpenting dilakukan di CSS. Di dalam wadah, Anda perlu menerapkan display:grid atau display:inline-grid . Gunakan display:grid jika Anda menginginkan kisi tingkat blok. Gunakan display:inline-grid untuk grid tingkat inline.

 [css] .container { display: grid; grid-template-columns: 1fr 3fr; grid-column-gap: 10px; grid-row-gap: 15px; } .grid { background-color: #444; color: #fff; padding: 25px; font-size: 3rem; } [/css]

Properti grid-template-columns dan grid-template-rows digunakan untuk menentukan lebar baris dan kolom. 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.

Ada penyesuaian responsif yang dapat dilakukan, tetapi menggunakan unit pecahan adalah langkah awal yang bagus. Jarak antar area dapat dikontrol dengan grid-column-gamp dan grid-row-gap .

Segalanya terlihat cukup ketat, tetapi dengan beberapa spesifikasi lagi, semuanya akan terbentuk.

Contoh ini dimulai dengan menempatkan header, tetapi elemen dapat ditempatkan dalam urutan apa pun yang paling sesuai untuk Anda. Jika Anda ingin memulai dengan footer, itu juga akan berhasil.

Mari kita mulai dengan header, yang dimulai dari kolom baris 1 ke kolom baris 4 dan baris baris 1 ke baris baris 2. CSS akan terlihat seperti ini:

 [css] .header { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; } [/css]

Anda mungkin memperhatikan bahwa sidebar diperas dan kami tidak dapat melihatnya terlalu banyak. Kita perlu melakukan sedikit penataan ulang. Dalam tata letak ini, mereferensikan garis untuk mendapatkan penempatan akan membantu pengaturan. Garis bertindak sebagai pedoman. Header terletak di antara baris pada baris pertama dan baris pada baris kedua. Untuk sidebar, akan dimulai pada baris ketiga dan berakhir pada baris keenam. Baris tajuk diakhiri dengan dua, jadi ini akan ditempatkan tepat di bawahnya. Untuk melihat contohnya, lihat proyek di Codepen.

Kami menggunakan grid-column-start untuk menentukan garis vertikal awal untuk suatu elemen. Dalam hal ini, akan diatur ke tiga. grid-column-end menunjukkan garis vertikal akhir untuk suatu elemen. Dalam hal ini, properti ini akan sama dengan empat. Nilai baris lainnya juga akan diatur dengan cara yang sama. Penempatan sidebar ada di sana, hanya ditutupi oleh area konten.

 [css] .sidebar { grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 4; background: #a0c263; } [/css]

Konten utama dimulai pada kolom tiga dan berakhir pada kolom empat. Bagian atas sidebar dan area konten rata, jadi keduanya memiliki grid-row-start dari tiga. Anda mungkin bertanya-tanya bagaimana konten dan sidebar jauh lebih tinggi. Dengan menempatkan ketinggian pada wadah, dalam hal ini 400px, sekarang lebih tinggi dari elemen lainnya.

 [css] .content { grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3; background: #f5c531; height: 400px; } [/css]

Dua area konten terakhir adalah area konten ekstra dan footer.

 [css] .extra { grid-column-start: 2; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4; background: #898989; } .footer { grid-column-start: 1; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4; background: #FFA500; } [/css]

Deklarasi akhir dan awal dapat ditulis dengan lebih efisien. Anda mungkin melihat grid-column-start: 1; dan grid-column-end: 3; ditulis dengan singkatan. Ini akan terlihat seperti grid-column: 1 / 3; . Ide yang sama ini dapat digunakan untuk mendeklarasikan informasi baris kolom.

Keunggulan Responsif

Sekarang tata letak telah dibuat, tampaknya sangat "desktop". Bagaimana dengan tablet dan perangkat seluler? Tata Letak Kotak CSS bekerja dengan baik dengan kueri media sehingga desain dapat beradaptasi dengan ukuran layar yang berbeda. Apa yang benar-benar keren adalah Anda dapat mengubah area konten di titik henti kueri media yang berbeda ini. Sebagai seorang desainer, ini berarti Anda memilih apa yang terbaik untuk tata letak Anda pada breakpoint yang berbeda. Misalnya, jika Anda ingin "konten tambahan" ditempatkan di atas area "konten", Anda dapat menentukan kolom dan baris yang benar.

 [css] /* For mobile phones: */ .header { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2; } .extra { grid-column-start: 1; grid-column-end: 4; grid-row-start: 3; grid-row-end: 4; } .content { grid-column-start: 1; grid-column-end: 4; grid-row-start: 5; grid-row-end: 6; background: #f5c531; height: 400px; } [/css]

Dengan membuat kolom dimulai dari satu dan diakhiri dengan empat, kami telah membuat area konten menjadi lebar penuh. Baris kisi ditempatkan sehingga "konten tambahan" sekarang berada di atas "konten".

Alat peramban untuk Tata Letak Kisi CSS

Saat Anda mendesain tata letak, atau memeriksa situs web lain, Firefox menawarkan alat hebat untuk bekerja dengan Tata Letak Kotak CSS. Ini disebut CSS Grid Playground dan membuat pemeriksaan grid menjadi sangat intuitif. Dengan membuka inspektur, ada opsi di tab tata letak untuk melihat secara visual bagaimana kisi dibuat. Ini akan membuat proses desain lebih mudah untuk memiliki alat ini untuk mengeksplorasi bagaimana properti kisi yang berbeda memengaruhi tata letak dan desain kisi secara keseluruhan.

CSS Grid Layouts adalah cara baru yang menarik untuk membuat tata letak web. Seperti yang Anda lihat, sangat mudah untuk mengaktifkan dan menjalankannya saat membuat tata letak halaman sederhana. Contoh sederhana ini adalah dasar yang baik untuk membuat tata letak yang lebih kompleks. Karena ini semakin populer, akan ada keuntungan dari teknologi ini saat mendesain untuk berbagai perangkat dan breakpoint dengan penyesuaian tata letak yang dapat dilakukan.