Cara Membangun Layout Kompleks Menggunakan CSS

Layout untuk Web selalu terbatas, benar-benar tidak pernah ada yang benar-benar didedikasikan untuk membuat konten mudah ditampilkan dalam format yang masuk akal.

Kembali ke tahun 90-an ketika web pertama kali memegang, desainer yang digunakan untuk meletakkan konten pada grid, menemukan satu-satunya cara untuk mendapatkan hasil yang sama di browser adalah menggunakan tabel. Sel menggabungkan menyebabkan kompleks Tata letak situs web , tetapi ini bermain kekacauan dengan aksesibilitas dan SEO. Maju cepat dan hari ini ada segala cara untuk menempatkan konten dengan mengapung, kotak fleksibel dan sebagainya.

CSS3 benar-benar mendorong kemampuan Web maju dan sejak 2014 telah ada Layout Grid CSS. . Ini saat ini memiliki dukungan browser 75 persen, jadi sampai pada titik kapan saatnya memberi pertimbangan serius. Yayasan 6 Gramework 6 telah naik dan menggunakannya untuk memberi daya pada gridnya.

Tutorial ini akan fokus pada pembuatan fitur gaya majalah yang akan menunjukkan kepada Anda cara menyempurnakan Desain Web Responsif untuk ukuran layar sedang dan kecil.

Unduh file tutorial di sini

01. Mulai

Buka file 'grid1.html' dari folder Mulai di file proyek . Tata letak HTML untuk ini memiliki lima tag div, hanya bernama item1-5 sebagai kelas CSS. Ini akan menjadi konten yang ditempatkan ke dalam grid. Wadah pembungkus ini akan menentukan grid, yang akan memiliki empat kolom.

 & lt; div class = "wadah" & gt;
  & lt; div class = "item1" & gt; item 1 & lt; / div & gt;
  & lt; div class = "item2" & gt; item 2 & lt; / div & gt;
  & lt; div class = "item3" & gt; item 3 & lt; / div & gt;
  & lt; div class = "item4" & gt; item 4 & lt; / div & gt;
  & lt; div class = "item5" & gt; item 5 & lt; / div & gt;
& lt; / div & gt; 

02. Periksa CSS untuk grid

Melihat di bagian kepala Anda dapat melihat bahwa 'wadah' telah disuruh ditata sebagai kisi, dengan ketinggian otomatis untuk baris, sementara kolom harus diatur ke empat dengan masing-masing set hingga 25 persen dari browser . Periksa ini di browser dan Anda akan melihat bahwa setiap item secara otomatis menetapkan posisi grid berikutnya yang tersedia.

 .container {
  Tampilan: grid;
  Grid-template-baris: otomatis;
  Template-template-kolom: Ulangi (4, 25%); } 

03. Tetapkan posisi grid

Sekarang lihat file 'grid2.html'. Ini sama dengan file pertama, kecuali 'item1' dan 'item2' diberikan posisi tertentu. Yang pertama diposisikan dalam baris 1 dan berakhir sebelum baris 2. Kolom dimulai pada 1 dan berakhir pada 3 sehingga mencakup dua kolom. Mulai kedua di Kolom 3 dan mengambil dua kolom berikutnya. Barang yang tersisa mengisi slot grid berikutnya yang tersedia.

 .Item1 {
  Grid-Row-Mulai: 1;
  Grid-Row-end: 2;
  grid-kolom-mulai: 1;
  grid-kolom-end: 3;
}
.Item2 {
  Grid-Row-Mulai: 1;
  Grid-Row-end: 2;
  grid-kolom-mulai: 3;
  Grid-Column-end: 5;
} 

04. Gunakan templat grid

Buka 'grid3.html' dan lihat tubuh HTML. Anda akan melihat bahwa ada tata letak dengan header, sidebar, bagian konten utama dan footer. Anda dapat menambahkan lebih banyak teks ke dalam konten untuk melihat apa yang terjadi ketika ini ditempatkan. Grid akan menggunakan fitur template untuk membuat bagian-bagian ini menjadi tata letak.

 & lt; div class = "wadah" & gt;
  & lt; div class = "header" & gt; header & lt; / div & gt;
  & lt; div class = "bilah samping" & gt; sidebar & lt; / div & gt;
  & lt; div class = "konten" & gt; konten & lt; / div & gt;
  & lt; div class = "footer" & gt; footer & lt; / div & gt;
& lt; / div & gt; 

05. Tentukan template

Lihatlah CSS untuk wadah. Itu kembali didefinisikan sebagai kisi. Baris atas akan setinggi 200px, tengah akan berukuran otomatis dan baris terakhir akan tinggi 100px. Kolom diatur menjadi 33 persen lebar dan untuk mengisi ulang sisanya. Template menyatakan header akan mengisi kedua kolom. Baris berikutnya akan menjadi bilah samping di kolom pertama dan konten di selanjutnya. Footer pergi keduanya.

 .container {
  Tampilan: grid;
  Grid-Template-Rows: 200px Auto 100px;
  Template-template-kolom: 33% otomatis;
  Area Template Grid:
  "Header Header"
  "Konten Sidebar"
  "Footer Footer"; } 

06. Tautkan template ke kelas

Untuk menautkan kelas ke template, kode yang ditampilkan di sini mendefinisikan ini. Setiap area grid dinamai dan tautan dibuat. Konten tidak ditampilkan di sini, tetapi ada di dokumen 'Grid3.html'. Lihat ini di browser untuk melihat tata letak grid. Karena dua kolom didefinisikan, template membutuhkan dua bidang di masing-masing koma terbalik.

 .Header {
  Area Grid: Header;
}
.sidebar {
  Area Grid: Sidebar;
}
.footer {
  Area Grid: Footer; } 

07. Buat responsif

Untuk membuat responsif 'grid3.html', kueri media dimasukkan dan baris atas disimpan pada 200 persen, sedangkan baris yang tersisa akan secara otomatis berukuran. Hanya ada satu kolom, lebar penuh, sehingga template memiliki satu kata di setiap koma terbalik untuk menentukan tata letak. Ini dapat dengan mudah dipesan ulang tanpa menggeser HTML.

 @Media layar dan (lebar maksimal: 699px) {
  .container {
  Tampilan: grid;
  Grid-template-baris: 200px otomatis;
  Template-template-kolom: 100%;
  Grid-template-Area: "Header" "Sidebar" "Konten" "Footer";
  }
} 

08. Bekerja pada tata letak nyata

Sekarang buka 'index.html' - Semua HTML untuk konten sudah dibuat, seperti memiliki beberapa CSS untuk elemen desain. Tambahkan grid ini ke tag gaya di bagian kepala. Melakukannya membuat grid tiga kolom dengan templat untuk setiap bagian. Perhatikan pemberhentian penuh untuk bagian grid kosong.

 .container1 {
  Lebar: 80%;
  MARGIN: 0 AUTO;
  Tampilan: grid;
  Grid-template-baris: otomatis;
  Template-template-kolom: 33,3% 33,3% otomatis;
  Area Template-Template: "Header Header Header" ". Standfirst StandFirst" ".. Pasal1" "Focus Pullquote Pullquote" "Artikel2 Pasal2.";
} 

09. Tautkan template

Seperti langkah sebelumnya, ini menautkan header dengan template. Header disuruh menjangkau ketiga kolom grid, maka standfirst diatur untuk mengambil dua kolom dan memiliki kolom kosong di sebelah kiri. Jika Anda memeriksa browser, kolom itu diisi karena kandungan yang tersisa mengisi ulang ruang yang tersedia berikutnya - itu tidak akan melakukan ini ketika semuanya diatur.

 .Header {
  Area Grid: Header;
}
.standfirst {
  area grid: standfirst;
} 

10. Tambahkan area berikutnya

Sekarang artikel pertama, kutipan tarik dan gambar fokus ditempatkan ke dalam desain. Kutipan tarik dan gambar berdampingan di baris yang sama. Pada tahap ini, Pasal2 belum ditempatkan sehingga mengambil ruang pertama yang tersedia di kisi-kisi yang ada di sebelah standfirst.

 .Article1 {
  Area Grid: Pasal1;
}
.Pullquote {
  Area Grid: Pullquote;
}
.focus {
  Area Grid: Fokus;
  Teks-Align: Center; } 

11. Selesaikan grid pertama

Menambahkan CSS Artikel kedua memungkinkan semua grid pertama ditempatkan dengan benar. Melihat ini di browser akan menunjukkan bahwa tata letak bekerja dengan gambar latar belakang dan membuat jenis tata letak yang terlihat di majalah, di mana perancang bekerja di sekitar gambar latar belakang besar.

 .Article2 {
    Area Grid: Pasal2;
    kolom-gap: 65px;
    kolom-hitungan: 2;
} 

12. Tambahkan latar belakang putih

Sebelum memulai kisi kedua, Anda mungkin bertanya-tanya mengapa ada kebutuhan untuk dua grid. Alasannya adalah bahwa grid ini akan memiliki latar belakang lebar penuh putih sehingga CSS ini akan membungkus kisi kedua. Ini untuk memberikan bagian ini perasaan halaman kedua dalam desain.

 .whitbg {
    Padding: 100px 0;
    Latar Belakang - Warna: #ddd;
} 

13. Buat grid kedua

Kisi kedua lebih sederhana dari yang pertama. Ada tiga kolom, dengan ketinggian otomatis pada baris. Konten akan mengisi kolom masing-masing sehingga tidak perlu menentukan area template. Namun, ketika desain tablet ditambahkan, ini perlu beralih ke dua kolom, sehingga reflow diperlukan dan nama akan penting.

 .container2 {
    Lebar: 80%;
    MARGIN: 0 AUTO;
    Tampilan: grid;
    Grid-template-baris: otomatis;
    Template-template-kolom: 33,3% 33,3% otomatis;
    Area Template-Template: "IMG1 IMG2 Pasal3";
} 

14. Tambahkan kolom

Masing-masing kelas CSS di grid kedua disuruh menghubungkan dengan kolom yang relevan, sebagaimana didefinisikan dalam templat grid. Warna teks artikel diubah hanya untuk membuatnya menonjol terhadap latar belakang bagian ini. Dengan hanya footer untuk menyelesaikan, desain tata letak gaya majalah hampir ada.

 .Img1 {
  Wilayah Grid: IMG1;
}
.mg2 {
    Area Grid: IMG2;
}
.Article3 {
  Area Grid: Pasal3;
  Warna: # 333;
} 

15. Sempurnakan kaki halaman

Finishing off halaman akan menempatkan div lebar penuh di layar, yang akan diisi dengan warna hitam dan teks hanya dipusatkan. Ini melengkapi versi desktop dari desain, tetapi pindahkan layar di bawah 1200px lebar dan situs mulai rusak.

 .footer {
    Latar Belakang - Warna: # 000;
    Warna: # 999;
    Teks-Align: Center;
    Padding: 50px 20px 100px;
} 

16. Sesuaikan untuk desain layar sedang

Permintaan media dimasukkan di sini untuk menjaga desain ketika lebar browser kurang dari 1200px. Kode untuk langkah 17 dan 18 akan ditempatkan di dalam tanda kurung di mana komentarnya berada. Ini akan menjadi kasus mengubah struktur tata letak grid.

 @media layar dan (lebar maks: 1200px) {
  / * Kode di sini * /
} 

17. Reflow grid pertama

Kotak pertama diatur untuk sekarang mengisi lebar penuh browser hanya dengan dua kolom, bukan tiga. Urutan bagian ditempatkan ke dalam templat, dengan artikel beralih sisi, karena ini cocok dengan lebih baik dengan gambar latar belakang pada ukuran layar ini.

 .container1 {
  Lebar: 100%;
  Grid-template-baris: otomatis;
  Template-template-kolom: 50% 50%;
  Area Template Grid: "Header Header" "StandFirst Standfirst" "Pasal1." "Pullquote Pullquote" "Pasal2 Focus";
  }
.Article2 {
  Kolom-hitungan: 1;
  } 

18. Uji tata letak Anda

Kisi kedua juga diubah ukurannya untuk mengambil lebar penuh dari browser dan dua kolom ditambahkan. Gambar ditempatkan berdampingan pada baris di atas teks sehingga cocok dengan tampilan dengan rapi. Anda dapat menguji tata letak ini di browser dengan mengubah ukuran browser Anda di bawah lebar 1200px.

 .container2 {
  Lebar: 100%;
  MARGIN: 0 AUTO;
  Grid-template-baris: otomatis;
  Template-template-kolom: 50% 50%;
  Area Template-Template: "IMG1 IMG2" "Pasal3 Pasal3";
} 

19. Tweak Desain untuk Mobile

Setiap browser yang memiliki lebar kurang dari 769px akan mendapatkan kode yang ditambahkan dalam langkah-langkah akhir. Yang perlu kita lakukan di sini adalah memastikan bahwa masing-masing grid memiliki tata letak kolom tunggal sehingga konten dapat dilihat dengan benar di dalam ruang yang lebih kecil.

 @media layar dan (lebar maksimal: 768px) {
  / * Kode Langkah Terakhir di sini * /
} 

20. Periksa kisi kolom tunggal

Sekarang grid pertama diatur ke satu kolom 100 persen dari lebar browser dan urutan bagian ditambahkan di area templat. Periksa untuk melihat bagaimana bagian pertama dari halaman bekerja di layar seluler.

 .container1 {
  Lebar: 100%;
  Grid-template-baris: otomatis;
  Template-template-kolom: 100%;
  Area grid-template: "Header" "StandFirst" "Pasal1" "Pullquote" "Fokus" ";
} 

21. Selesaikan tata letak

Di sini, grid kedua juga dibuat untuk mengisi satu kolom dan tata letak bagian didefinisikan. Sekarang simpan desain yang sudah selesai dan lihat di layar berukuran berbeda untuk melihat kemampuan tata letak penuh dari grid CSS dan seberapa mudah itu untuk menyusun kembali konten untuk lebar yang berbeda.

 .container2 {
  Lebar: 100%;
  MARGIN: 0 AUTO;
  Grid-template-baris: otomatis;
  Template-template-kolom: 100%;
  Area Template Grid: "IMG1" "IMG2" "Pasal3";
} 

Artikel ini awalnya diterbitkan dalam desainer Web Majalah Desain Web Kreatif. Membeli masalah 271. atau langganan .

Artikel terkait:

• 5 Tips untuk CSS Super-Cepat
• Memahami Properti Tampilan CSS
• Cara membuat tata letak piramida dengan bentuk CSS