Rumah > Artikel > hujung hadapan web > Menguasai Reka Letak Responsif: Mencapai Reka Bentuk Kompleks dengan Grid CSS
Mencipta reka letak responsif ialah cabaran biasa bagi pembangun web. Dalam blog ini, kami akan meneroka cara untuk mencapai reka bentuk responsif khusus menggunakan teknik CSS yang berbeza, memfokuskan pada sebab Grid CSS ialah pendekatan terbaik untuk reka letak khusus ini.
Kita perlu membuat reka letak di mana:
Flexbox sangat baik untuk reka letak satu dimensi tetapi bergelut dengan reka letak dua dimensi yang kompleks seperti kami. Inilah sebabnya:
<div class="container"> <div class="item">DIV 1</div> <div class="item">DIV 2</div> <div class="item">DIV 3</div> </div>
.container { display: flex; flex-wrap: wrap; gap: 10px; padding: 10px; } .item { background-color: #40c4ff; color: white; padding: 20px; text-align: center; box-sizing: border-box; } .item:nth-child(1), .item:nth-child(3) { flex: 1 1 calc(50% - 10px); } .item:nth-child(2) { flex: 1 1 50%; } @media (max-width: 768px) { .item { flex: 1 1 100%; } }
Dalam persediaan flexbox ini:
Grid CSS cemerlang dalam mencipta reka letak dua dimensi, menjadikannya sempurna untuk cabaran ini.
<div class="container"> <div class="item">DIV 1</div> <div class="item">DIV 2</div> <div class="item">DIV 3</div> </div>
.container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 10px; padding: 10px; } .item { background-color: #40c4ff; color: white; padding: 20px; text-align: center; box-sizing: border-box; } .item:nth-child(1) { grid-column: 1 / 2; grid-row: 1 / 2; } .item:nth-child(2) { grid-column: 2 / 3; grid-row: 1 / 3; } .item:nth-child(3) { grid-column: 1 / 2; grid-row: 2 / 3; } @media (max-width: 768px) { .container { display: flex; flex-direction: column; } .item { width: 100%; } }
Walaupun Flexbox bagus untuk reka letak satu dimensi yang lebih ringkas, Grid CSS menyediakan kuasa dan fleksibiliti yang diperlukan untuk reka bentuk dua dimensi yang lebih kompleks. Dengan menggunakan Grid CSS, kami boleh mencapai reka letak responsif yang diingini dengan mudah dengan kod minimum dan kawalan maksimum.
Jangan ragu untuk menyesuaikan contoh ini agar sesuai dengan projek anda sendiri dan nikmati faedah menggunakan Grid CSS untuk reka letak responsif anda!
Atas ialah kandungan terperinci Menguasai Reka Letak Responsif: Mencapai Reka Bentuk Kompleks dengan Grid CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!