การใช้ CSS Grid สำหรับเค้าโครงสไตล์นิตยสาร
CSS มอบความยืดหยุ่นมากมายให้คุณในการออกแบบเลย์เอาต์ที่น่าดึงดูดและตอบสนองได้ดี เค้าโครงสไตล์นิตยสารจัดเนื้อหาข้อความและรูปภาพผสมในรูปแบบที่น่าดึงดูดและสะดุดตา ทำให้เป็นตัวเลือกยอดนิยม
CSS Grid มอบเครื่องมือมากมายให้กับนักพัฒนาและระดับการควบคุมที่ซับซ้อนซึ่งจำเป็นสำหรับการสร้างเลย์เอาต์ดังกล่าว จึงทำให้กลายเป็นชุดทักษะอันทรงคุณค่าที่จะได้มา
เค้าโครงสไตล์นิตยสารคืออะไร?
เค้าโครงสไตล์นิตยสารใช้ระบบตารางเพื่อจัดระเบียบเนื้อหาภายในคอลัมน์และแถว ช่วยให้การออกแบบมีรูปลักษณ์ที่เป็นระเบียบ
เทมเพลตที่เป็นนวัตกรรมใหม่ของเรามีความเป็นเลิศในการนำเสนอสื่อที่หลากหลาย เช่น ข้อความ รูปภาพ และโฆษณาในลักษณะที่มีโครงสร้างและสวยงาม
ทำความเข้าใจ CSS Grid
CSS Grid เป็นโซลูชันเลย์เอาต์ขั้นสูงที่ช่วยให้ผู้ใช้สามารถจัดเรียงองค์ประกอบภายในระนาบสองมิติได้อย่างง่ายดาย ช่วยอำนวยความสะดวกในการสร้างโครงสร้างแบบเรียงเป็นแนวตลอดจนการสร้างแถวผ่านความสามารถในการจัดระเบียบเชิงพื้นที่อันทรงพลัง
คอนเทนเนอร์กริดซึ่งกำหนดกรอบการทำงานของกริด และรายการกริดซึ่งทำหน้าที่เป็นลูกหลานของคอนเทนเนอร์ดังกล่าว
แน่นอนว่า นี่คือการสาธิตที่สวยงามเกี่ยวกับวิธีการใช้ CSS Grid เพื่อสร้างเค้าโครงตาราง 3x3:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.grid-item {
background-color: #f76a6a;
padding: 20px;
}
โค้ดปัจจุบันสร้างเลย์เอาต์แบบตารางที่ประกอบด้วยส่วนแนวนอนสามส่วน โดยแต่ละส่วนมีความกว้างเท่ากัน และมีจุดคั่นที่สอดคล้องกัน 20 พิกเซลระหว่างองค์ประกอบที่อยู่ติดกัน การแสดงภาพที่ตามมาแสดงไว้ด้านล่าง:
การตั้งค่าโครงสร้าง HTML
เพื่อให้บรรลุการออกแบบที่เหมือนสิ่งพิมพ์ จำเป็นต้องมีโครงสร้าง HTML ที่เป็นระเบียบ แนวทางหนึ่งเกี่ยวข้องกับการใช้แท็กที่มีความหมายเชิงความหมาย เช่น และ เพื่อจัดโครงสร้างเนื้อหา รองพื้นที่เหมาะสมสามารถพบได้ในตัวอย่างด้านล่าง:
<body>
<section class="magazine-layout">
<article>
<img src="https://source.unsplash.com/random/?city,night" />
<p>Some Article Title</p>
</article>
<article>
<img src="https://source.unsplash.com/random/?city,day" />
<p>Some Article Title</p>
</article>
<article>
<img src="https://source.unsplash.com/random/?animal" />
<p>Some Article Title</p>
</article>
<article>
<img src="https://source.unsplash.com/random/?book" />
<p>Some Article Title</p>
</article>
<article>
<img src="https://source.unsplash.com/random/?food" />
<p>Some Article Title</p>
</article>
</section>
</body>
การกำหนดกริดคอนเทนเนอร์
หากต้องการสร้างตารางกริดเพื่อให้ได้รูปลักษณ์ที่เหมือนนิตยสารสำหรับเลย์เอาต์ของคุณ ให้รวมสไตล์ CSS ต่อไปนี้:
.magazine-layout {
height: 100%;
max-width: 130rem;
margin: 0 auto;
/* Defines the grid container */
display: grid;
/* Defines the column specification */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
/* Defines the row specification */
grid-template-rows: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
padding: 2rem;
}
ตาราง"
คุณสมบัติ grid-template-columns และ grid-template-rows ใช้การผสมผสานระหว่างการทำซ้ำ การปรับขนาดอัตโนมัติ และข้อจำกัดขั้นต่ำ/สูงสุด เพื่อรับประกันว่าความกว้างของคอลัมน์และความสูงของแถวจะวัดได้ไม่ต่ำกว่า 250 พิกเซลในขณะที่รองรับองค์ประกอบได้มากเท่าๆ กัน ในแต่ละมิติให้เป็นไปได้
การวางรายการกริด
ลองปรับปรุงรูปลักษณ์ของบทความโดยเปลี่ยนให้เป็นภาพขนาดย่อที่สะดุดตาและเรียกว่าภาพขนาดย่อ
article {
overflow: hidden;
border-radius: 0.5rem;
position: relative;
color: #fff;
}
.article img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
max-height: 400px;
}
.article p {
position: absolute;
bottom: 0;
left: 0;
padding: 2rem;
background: #333333c1;
font-size: 2rem;
border-radius: 0.5rem;
}
อันที่จริง เมื่อทำตามขั้นตอนที่อธิบายไว้ข้างต้นเสร็จแล้ว เว็บไซต์ควรมีหน้าตาคล้ายกับสิ่งต่อไปนี้:
การสร้างเลย์เอาต์สไตล์นิตยสาร
เพื่อให้มีลักษณะเหมือนนิตยสารอย่างแท้จริง ให้ใช้สไตล์ CSS เพื่อจัดเรียงองค์ประกอบของบทความตามต้องการ:
.article:nth-child(1) {
grid-column: 1 / span 3;
}
.article:nth-child(4) {
grid-column: 2 / span 2;
}
ตอนนี้หน้าของคุณควรมีลักษณะดังนี้:
การออกแบบที่ตอบสนองด้วย CSS Grid
ข้อดีอย่างหนึ่งของการใช้ CSS Grid คือความสามารถในการปรับตัวอย่างแท้จริง เนื่องจากช่วยให้นักออกแบบและนักพัฒนาสามารถใช้คำสั่งสื่อเพื่อปรับเปลี่ยนการจัดเรียงองค์ประกอบตามขนาดหน้าจอที่แตกต่างกัน ด้วยการใช้คุณลักษณะดังกล่าว เราจึงสามารถมั่นใจได้ว่าเนื้อหาของเว็บไซต์ยังคงดึงดูดสายตาและใช้งานง่ายบนอุปกรณ์ต่างๆ ที่มีความสามารถในการแสดงผลที่หลากหลาย
/* Media query for screens up to 1100px */
@media screen and (max-width: 1100px) {
.article:nth-child(3) {
grid-column: 2 / span 2;
}
.article:nth-child(5) {
grid-row: 3 / span 1;
}
}
/* Media query for screens up to 600px */
@media screen and (max-width: 600px) {
.article:nth-child(2),
.article:nth-child(3),
.article:nth-child(4),
.article:nth-child(5) {
grid-column: 1 / span 3;
}
}
ข้อความค้นหาสื่อที่กล่าวมาข้างต้นใช้การกำหนดค่าเค้าโครงที่หลากหลายซึ่งได้รับการปรับให้เหมาะกับขนาดหน้าจอต่างๆ ดังนั้นจึงมั่นใจได้ว่าการออกแบบของคุณตอบสนองและเข้ากันได้กับอุปกรณ์ที่หลากหลาย
เบราว์เซอร์ของคุณไม่รองรับแท็กวิดีโอ
การแปลงเลย์เอาต์ของคุณด้วย CSS Grid
การใช้ CSS Grid ช่วยให้สามารถสร้างเค้าโครงที่ได้รับแรงบันดาลใจจากนิตยสารที่ปรับเปลี่ยนได้ ซึ่งสามารถรองรับขนาดหน้าจอต่างๆ ได้อย่างราบรื่น เครื่องมืออเนกประสงค์นี้ช่วยให้ผู้ใช้สามารถสร้างระบบกริด วางตำแหน่งองค์ประกอบ และแก้ไขการจัดเตรียมได้อย่างง่ายดาย
สำรวจการจัดเรียงตารางและความสวยงามต่างๆ เพื่อสร้างการออกแบบในอุดมคติที่ได้รับอิทธิพลจากสิ่งพิมพ์สำหรับการนำเสนอตัวตนบนโลกออนไลน์ของคุณ