เลย์เอาต์มาโครอธิบายถึงการจัดระเบียบอินเทอร์เฟซขนาดใหญ่ระดับหน้าเว็บ
ก่อนใช้เลย์เอาต์ใดๆ คุณควรตรวจสอบว่าโฟลว์ของเนื้อหาสมเหตุสมผล การจัดลำดับเริ่มต้นแบบคอลัมน์เดียวนี้คือสิ่งที่หน้าจอขนาดเล็กจะได้รับ
<body>
<header>…</header>
<main>
<article>…</article>
<aside>…</aside>
</main>
<footer>…</footer>
</body>
เมื่อจัดเรียงคอมโพเนนต์ระดับหน้าเว็บแต่ละรายการ คุณกำลังออกแบบเลย์เอาต์มาโคร ซึ่งเป็นมุมมองระดับสูงของหน้าเว็บ คุณสามารถใช้คิวรี่สื่อเพื่อระบุกฎใน CSS ที่อธิบายวิธีปรับมุมมองนี้ให้เข้ากับขนาดหน้าจอต่างๆ
Grid
CSS Grid เป็นเครื่องมือที่ยอดเยี่ยมสำหรับการใช้เลย์เอาต์กับหน้าเว็บ ในตัวอย่างก่อนหน้า สมมติว่าคุณต้องการเลย์เอาต์ 2 คอลัมน์เมื่อมีความกว้างหน้าจอเพียงพอ หากต้องการใช้เลย์เอาต์ 2 คอลัมน์นี้เมื่อเบราว์เซอร์กว้างพอ ให้ใช้คิวรี่สื่อเพื่อกำหนดสไตล์ Grid เหนือเบรกพอยต์ที่ระบุ
@media (min-width: 45em) {
main {
display: grid;
grid-template-columns: 2fr 1fr;
}
}
Flexbox
สำหรับเลย์เอาต์ที่เฉพาะเจาะจงนี้ คุณยังใช้ Flexbox ได้ด้วย สไตล์จะมีลักษณะดังนี้
@media (min-width: 45em) {
main {
display: flex;
flex-direction: row;
}
main article {
flex: 2;
}
main aside {
flex: 1;
}
}
อย่างไรก็ตาม เวอร์ชัน Flexbox ต้องใช้ CSS มากกว่า แต่ละคอลัมน์มีกฎแยกต่างหากเพื่ออธิบายว่าควรใช้พื้นที่เท่าใด ในตัวอย่าง Grid ข้อมูลเดียวกันนั้นจะรวมอยู่ในกฎเดียวสำหรับองค์ประกอบที่บรรจุ
คุณต้องใช้คิวรี่สื่อไหม
คุณอาจไม่จำเป็นต้องใช้คิวรี่สื่อเสมอไป คิวรี่สื่อทำงานได้ดีเมื่อคุณใช้การเปลี่ยนแปลงกับองค์ประกอบ 2-3 รายการ แต่หากต้องอัปเดตเลย์เอาต์บ่อยๆ คิวรี่สื่ออาจจัดการได้ยากเนื่องจากมีเบรกพอยต์จำนวนมาก
สมมติว่าคุณมีหน้าเว็บที่เต็มไปด้วยคอมโพเนนต์การ์ด
การ์ดจะมีความกว้างไม่เกิน 15em และคุณต้องการใส่การ์ดหลายๆ ใบในบรรทัดเดียวให้ได้มากที่สุด
คุณสามารถเขียนคิวรี่สื่อที่มีเบรกพอยต์ เช่น 30em, 45em และ 60em แต่การดำเนินการดังกล่าวค่อนข้างน่าเบื่อและดูแลรักษาได้ยาก
แต่คุณสามารถใช้กฎเพื่อให้การ์ดใช้พื้นที่ที่เหมาะสมโดยอัตโนมัติ
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
grid-gap: 1em;
}
คุณสามารถสร้างเลย์เอาต์ที่คล้ายกันด้วย Flexbox ในกรณีนี้ หากมีจำนวนการ์ดไม่เพียงพอที่จะเติมแถวสุดท้าย การ์ดที่เหลือจะยืดออกเพื่อเติมพื้นที่ว่างแทนที่จะจัดเรียงเป็นคอลัมน์ หากต้องการจัดเรียงแถวและคอลัมน์ ให้ใช้ Grid
.cards {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 1em;
}
.cards .card {
flex-basis: 15em;
flex-grow: 1;
}
การใช้กฎที่ชาญฉลาดบางอย่างใน Flexbox หรือ Grid จะช่วยให้คุณออกแบบเลย์เอาต์มาโครแบบไดนามิกได้โดยใช้ CSS น้อยที่สุดและไม่ต้องใช้คิวรี่สื่อ ซึ่งจะช่วยลดภาระงานของคุณ เนื่องจากคุณจะให้เบราว์เซอร์ทำการคำนวณแทน หากต้องการดูตัวอย่างเลย์เอาต์ CSS ที่ทันสมัยซึ่งมีความยืดหยุ่นโดยไม่จำเป็นต้องใช้คิวรี่สื่อ โปรดดู 1linelayouts.com
ทดสอบความเข้าใจ
ทดสอบความรู้เกี่ยวกับเลย์เอาต์มาโคร
ประโยคใดอธิบายเลย์เอาต์มาโครได้ดีที่สุด
เลย์เอาต์มาโครใช้คิวรี่สื่อเพื่อปรับให้เข้ากับขนาดหน้าจอต่างๆ เสมอไปไหม
เมื่อได้ไอเดียเกี่ยวกับเลย์เอาต์มาโครระดับหน้าเว็บแล้ว ให้หันมาสนใจคอมโพเนนต์ภายในหน้าเว็บ ซึ่งเป็นขอบเขตของ เลย์เอาต์ไมโคร