Bangun blog dengan grid dan flexbox

Sep 15, 2025
Bagaimana caranya
Build a blog with Grid and flexbox

Dua hingga tiga tahun terakhir telah melihat tata letak bergerak maju dalam lompatan dan batas. Sekarang, teknik modern ini memiliki hasil yang konsisten di browser modern, Anda benar-benar dapat menggunakannya untuk kode produksi Anda. Jika Anda bertanya-tanya Cara Memulai Blog , tutorial ini akan menunjukkan kepada Anda betapa sederhananya untuk membuat tata letak gaya blog standar menggunakan modul Kotak CSS dan Fleksibel, alias Flexbox. Kedengarannya seperti kerja terlalu keras untuk apa yang Anda inginkan? Lihat panduan kami untuk Platform Blogging Gratis Terbaik atau pilih atas Pembangun Situs Web . Bekerja dengan tim? Menyebarkan yang terbaik penyimpanan awan untuk menjaga prosesnya lancar.

Pertama mari kita cepat rekap dari dasar-dasar HTML dan mengapa itu baik untuk mencoba dan menulis kode semantik.

Lebih dari desktop dan seluler

Pernahkah Anda memperhatikan mode pembaca pada Safari dan Firefox? Ini adalah ikon di bilah alamat yang terlihat sedikit seperti kertas berjajar. Ini akan membuat Anda Tata Letak Situs Web Dalam mode taksi yang bebas gangguan, telanjang, agak seperti perangkat seperti penggunaan arloji Apple. Semakin banyak perangkat mengakses dan menampilkan konten web - mungkin hit besar Natal adalah speaker interaktif seperti Amazon Echo.

Dengan ini dalam pikiran, dan tentu saja perlunya situs Anda untuk bekerja pada pembaca layar dan sejenisnya, struktur halaman Anda sangat penting. Jika Anda hanya menggunakan & lt; div & gt; Untuk semua wadah Anda dan bahkan tombol maka perangkat memberikan kode Anda tidak akan tahu apa konteksnya, dan karenanya tidak dapat menggunakan fungsionalitas atau fitur asli.

01. Mulai tata letak halaman dasar

Kami akan membangun halaman web dasar untuk memasukkan header dengan navigasi, blok pahlawan, artikel utama, blok artikel yang menampilkan dan footer. Idenya di sini adalah melihat banyak Desain Web Responsif Teknik yang dapat kami terapkan tanpa menggunakan kueri media atau javascript bantu apa pun. Anda dapat melihat bahwa HTML halaman dibagi menjadi bagian yang berbeda menggunakan tag HTML5. Kami juga menambahkan kelas kepada mereka, karena browser yang lebih tua tidak akan tahu apa itu dan membuatnya sebagai div. Mari kita mulai dari atas halaman dan bekerja dengan cara kita. Namun dasar atau kompleks situs Anda, juga waktu untuk memikirkannya hosting web. Layanan tepat untuk Anda.

02. Bangun header situs

Build a blog with Grid and flexbox: Site header

Anda tidak akan memerlukan pembungkus atau wadah untuk header ini

Header situs berisi logo dan daftar yang tidak berurutan untuk navigasi. Kami tidak perlu menambahkan pembungkus atau wadah untuk meletakkan ini dengan logo ke kiri dan navigasi ke kanan dalam satu baris. 

 & lt; header class = "header" & gt;

& lt; img src = "gambar / logo.png" / & gt;
& lt; nav & gt;
& lt; ul kelas = "nav" & gt;
& lt; li & gt; & lt; a href = "#"
kelas = "aktif" & gt; home & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; & lt; a href = "#" & gt; tentang & lt; / a & gt; & li & gt;
& lt; li & gt; & lt; a href = "#" & gt; anjing & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; & lt; a href = "#" & gt; kontak & lt; / a & gt; & li & gt;
& lt; / ul & gt;
& lt; / nav & gt;
& lt; / header & gt;

03. Gunakan unit fr

Kami mengatur header untuk menampilkan grid, lalu gunakan 'Dapatkan-template-kolom' untuk mengatur dua kolom di header. Kami menggunakan fr. Unit di sini, yang merupakan unit fraksional - 1FR akan sama dengan ruang yang tersedia dalam wadah. Dalam hal ini kami memberikan navigasi area yang sedikit lebih kecil untuk diisi. 

 Header {
Tampilan: grid;
Template-template-kolom: 1.5fr 1fr;
Align-Item: Center;
}

04. Tambahkan navigasi situs

Sekarang kami menargetkan daftar item menu. Lagi kita putar & lt; ul & gt; ke dalam wadah kisi dan beri tahu item ke dalam untuk autofit ke kolom. Di sini kita gunakan minmax. Untuk memastikan kolom tidak akan pernah lebih kecil dari 100px, tetapi jika ruang lebih besar maka mereka dapat berbagi ruang masing-masing 1FR. 

 .nav {
Tampilan: grid;
grid-template-kolom: Ulangi (Auto-Fit, Minmax (100px, 1FR));
GRID-GAP: 10px;
Align-Item: Center;
}

05. Buat Blok Pahlawan

Build a blog with Grid and flexbox: Hero block

Memusatkan teks pahlawan jauh lebih mudah dengan jaringan css atau fleksibel

Bagian selanjutnya dari halaman adalah blok pahlawan utama. Teks secara tradisional vertikal yang memusatkan dalam wadah membutuhkan segala macam pekerjaan-sekitar. Menggunakan jaringan CSS atau Flex, ini sangat sederhana. 

 & lt; artikel & gt;
& lt; bagian kelas = "pahlawan" & gt;
& lt; h1 & gt; & lt; / h1 & gt;
& lt; p & gt; & lt; / p & gt;
& lt; a href = "" & gt; & lt; / a & gt;
& lt; / bagian & gt;
& lt; / artikel & gt;

06. Align ke pusat

Menyelaraskan pada dua sumbu adalah bagian dari roti dan mentega grid CSS. Di sini, kita dapat mengubah wadah pahlawan menjadi wadah kisi dan kemudian digunakan sejajarkan - konten (kiri ke kanan) dan membenarkan konten (atas ke bawah) ke posisi di tengah. Kami menggunakan a vh. Unit di sini, yang akan membuat pahlawan memblokir 50% dari ketinggian viewport. 

 .hero {
Min-Tinggi: 50VH;
Tampilan: grid;
membenarkan-item: pusat;
sejajar - konten: pusat;
membenarkan konten: pusat;
}

07. Buat bagian konten utama

Artikel utama juga memiliki blok ke kanan yang berisi bacaan lebih lanjut. Untuk membuat responsif ini tanpa harus menggunakan kueri media, kami dapat beralih ke FlexBox untuk memanfaatkan sebagian besar propertinya. 

 & lt; artikel kelas = "konten utama" & gt;
& lt; bagian / & gt;
& lt; / bagian & gt;
& lt; selain / & gt;
& lt; / artikel & gt;

08. Tambahkan tampilan dua kolom

Atur artikel ke wadah fleksibel. Tambahkan sedikit bantalan ke kiri dan kanan untuk memastikan ukuran teks tidak terlalu lama. Arah fleksibel adalah baris sehingga bagian dan selain di dalam akan duduk di samping satu sama lain saat ditata. Konten dibenarkan ke ruang antara sehingga teks tidak akan menyentuh ke samping. 

 konten utama {
Tampilan: Flex;
Flex-Wrap: Bungkus;
arah fleksibel: baris;
Membenarkan konten: ruang-antar;
Padding: 0 5VW 0 5VW;}

09. Buat responsif tanpa kueri media

Build a blog with Grid and flexbox: Responsive without media queries

Buat bagian yang responsif tanpa harus menggunakan kueri media

Bagian ini menggunakan campuran pintar dari Calc dan minimum dan lebar maksimum untuk memberi kita apa yang secara efektif kueri media tetapi pada tingkat wadah. Ketika ada cukup ruang, bagian akan memakan 70% orang tua, memungkinkan selain duduk di sampingnya. Dengan menggunakan Calc untuk lebarnya, kita dapat mengembalikan lebar besar atau mungil. 

 Bagian Konten Utama {
Lebar min: 70%;
Lebar: Calc ((48em - 100%) * 1000);
Lebar Max: 100%;
}

10. Tentukan titik istirahat

48em sama dengan 768px (48 * ukuran font dasar (16px)) jadi di atas 768px bagian akan menjadi lebar minimum 70% dan di bawah 768 lebar maksimum akan digunakan. Kami melakukan hal yang sama untuk selain, jadi dalam hal ini akan mengambil 25% pada layar besar atau 100% pada kecil. Efeknya adalah titik istirahat responsif murni memengaruhi wadah. 

. Konten-Konten {
Lebar min: 25%;
Lebar: Calc ((48em - 100%) * 1000);
Lebar Max: 100%;
}

11. Bangun blok responsif

Build a blog with Grid and flexbox: Responsive blocks

Gunakan div kontainer untuk membangun blok responsif Anda

Untuk membuat item fitur yang dijalankan di seluruh halaman, kami akhirnya menggunakan div kontainer pertama kami. 

 & lt; bagian kelas = "Daftar Kartu" & gt;
& lt; Div Class = "Card" & gt;
& lt; img / & gt;
& lt; div class = "detail kartu" & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; / section & gt;

12. Ulangi dan Autofit

Untuk daftar kartu kami, kami ingin memiliki empat berturut-turut, tetapi karena kami tidak menggunakan pertanyaan media yang kami atur minmax. Nilai ke 300px, yang akan cocok dengan baik pada ponsel kecil. Dengan menggunakan pengulangan dan autofit browser melakukan kerja keras dan akan sesuai dengan apa yang bisa menjadi baris dan kemudian mulai dari yang lain, jadi kita dapat pergi dari empat hingga satu baris kode. 

. Daftar-daftar {
Tampilan: grid;
GRID-GAP: 10px;
Grid-Template-Columns: Ulangi (Auto-Fit,
minmax (300px, 1fr));
}

.card {
 Tampilan: grid;
 Template-template-kolom: 1fr;
}

13. Buat tata letak kartu

Untuk detail dalam kartu kami beralih kembali ke Flex, mengatur aliran ke kolom sehingga item mengalir secara vertikal. Mengatur membenarkan konten properti yang sesuai - dalam hal ini ruang-merata bekerja dengan baik. Karena tag 'A' di panel ini akan menampilkan blok, itu akan meregangkan lebar wadah. Atur ke Flex-Mulai sehingga hanya membutuhkan ruang kontennya. 

 .Card-detail {
Tampilan: Flex;
Flex-Direction: kolom;
Membenarkan konten: Ruang-merata;
}

.card-detail a {
Align-Self: Flex-Start;
}

14. Gaya footer

Kami sudah turun ke footer, dan hanya akan menggunakan beberapa gaya yang kami gunakan sebelumnya untuk meletakkannya. 

 & lt; footer class = "footer" & gt;
& lt; p / & gt;
& lt; nav & gt;
& lt; ul kelas = "nav" & gt;
& lt; li / & gt;
& lt; / ul & gt;
& lt; / nav & gt;
& lt; ul kelas = "sosial" & gt;
& lt; li / & gt;
& lt; / ul & gt;
& lt; / footer & gt;

15. Sejajarkan item anak

Ada tiga area di footer ini. Tetapkan kolom grid Anda untuk mengulangi tiga pada satu unit fraksional masing-masing. Anda bisa menulis 'kisi-template-kolom: 1fr 1fr 1fr;' jika kamu memilih. Ikon sosial akan duduk selaras ke kanan - Anda dapat melakukan ini dengan memberi tahu item itu sendiri untuk menyelaraskan dengan benar menggunakan justifikasi-diri . 

 .footer {
Tampilan: grid;
Kotak-template-kolom: ulangi (3, 1fr);
grid-auto-flow: kolom;
Align-Item: Center;
}

.Social {
justifikasi diri: end;
}

16. Pertimbangkan kompatibilitas

Meskipun tutorial ini bekerja dengan baik melintasi tiga browser besar dan perangkat modern, itu belum diuji kembali ke IE. Tergantung pada proyek Anda, Anda dapat menggunakan peningkatan progresif dan menyajikan tata letak sederhana. Jika CSS Anda dibuat menggunakan preprocessor seperti SASS maka paket autoprefixer menyediakan beberapa awalan tambahan yang dibutuhkan untuk orang-orang seperti EDGE.

Artikel ini awalnya diterbitkan dalam edisi 284 dari Majalah Desain Web Kreatif Desainer web . Beli masalah 284 di sini atau berlangganan desainer web di sini .

Artikel terkait:

  • Panduan komprehensif untuk menggunakan grid CSS
  • Gunakan CSS Grid dan FlexBox untuk membangun antarmuka yang responsif
  • 5 Generator Grid CSS Keren

Bagaimana caranya - Artikel Terpopuler

penyimpanan cloud untuk foto dan gambar: Cara memilih cloud terbaik untuk pekerjaan Anda

Bagaimana caranya Sep 15, 2025

(Kredit Gambar: Getty Images) Penyimpanan cloud menawarkan banyak manfaat bagi kreatif dari semua jenis, terutama fot..

Cara membuat lukisan udara plein digital

Bagaimana caranya Sep 15, 2025

Dapatkan di luar ruangan untuk menciptakan seni yang hebat (Kredit Gambar: Mike Mc Cain) Ada begitu banya..

Bagaimana cara mengubah font di Bio Twitter Anda

Bagaimana caranya Sep 15, 2025

Ada banyak orang di Twitter - 261 juta akun Twitter terakhir kali kami memeriksa. Dan itu berarti sulit untuk membuat akun Anda m..

Buat efek tipografi 3D interaktif

Bagaimana caranya Sep 15, 2025

Tipografi selalu memainkan peran utama dalam persenjataan alat desainer apa pun karena mereka memilih jenis huruf yang tepat yang..

Bagaimana cara mengembangkan makhluk mitos

Bagaimana caranya Sep 15, 2025

Mereka yang ingin membuat desain makhluk realistis menggunakan campuran perangkat lunak - ZBrush, desainer luar biasa, key..

Buat pesan sempurna di semua klien email

Bagaimana caranya Sep 15, 2025

Untuk kampanye pemasaran email untuk bekerja, email harus mencapai kotak masuk dan menonjol dari yang lainnya. Namun, ceritanya tidak berakhir di sana. Email Anda harus render jika Anda ingin..

membuat prototipe hi-fidelity dalam atom

Bagaimana caranya Sep 15, 2025

Sangat mudah untuk terjebak dalam mencoba mengembangkan ide dalam mockup statis atau alat menggambar file datar, tetapi a ..

Cara menggabungkan peta perpindahan yang dipahat dan dilukis

Bagaimana caranya Sep 15, 2025

Kadang-kadang lebih efisien untuk menggabungkan berbagai peta perpindahan pada waktu render, daripada memahat semuanya. Contoh um..

Kategori