กริดโดยนัยและ Grid-Auto-Flow
ทำความเข้าใจวิธีที่ CSS Grid จัดการรายการที่อยู่นอกแทร็กที่ระบุไว้อย่างชัดเจนด้วยแถวและคอลัมน์โดยนัย
กริดโดยนัยและ Grid-Auto-Flow เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
กริดที่กำหนดชัดเจนเทียบกับกริดโดยปริยาย
กริดที่กำหนดชัดเจน คือกริดที่กำหนดด้วย grid-template-columns และ grid-template-rows เมื่อรายการล้นออกนอกแทร็กที่กำหนดไว้ เบราว์เซอร์จะสร้าง แทร็กโดยปริยาย ให้โดยอัตโนมัติ
grid-auto-rows
กำหนดขนาดของแทร็กแถวที่สร้างขึ้นโดยปริยาย หากไม่กำหนด แถวโดยปริยายจะมีขนาดพอดีกับเนื้อหา (auto)
<div class="gallery">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>grid-auto-rows ร่วมกับ minmax
กำหนดให้แถวโดยปริยายมีความสูงอย่างน้อยตามค่าที่ระบุ และยังขยายได้:
<div class="feed">
<div>1</div><div>2</div><div>3</div>
</div>grid-auto-columns
กำหนดขนาดแทร็กคอลัมน์โดยปริยาย เมื่อวางรายการไว้นอกช่วงคอลัมน์ที่กำหนดชัดเจน:
<div class="timeline">
<div>Event 1</div><div>Event 2</div>
</div>grid-auto-flow
ควบคุมวิธีที่อัลกอริทึมจัดวางอัตโนมัติใช้วางรายการ:
row(ค่าเริ่มต้น) — วางในแถว โดยเพิ่มแถวใหม่เมื่อจำเป็นcolumn— วางในคอลัมน์ โดยเพิ่มคอลัมน์ใหม่row dense— เติมช่องว่างอย่างเข้มข้นด้วยการย้อนกลับไปจัดวางใหม่column dense— เติมช่องว่างอย่างหนาแน่นในทิศทางคอลัมน์
grid-auto-flow: dense
dense ทำให้อัลกอริทึมพยายามเติมช่องว่างที่เหลือจากรายการซึ่งครอบคลุมหลายแทร็ก การทำเช่นนี้อาจทำให้รายการปรากฏไม่เรียงตามลำดับเดิม
<div class="masonry">
<div class="featured">Featured</div><div>2</div><div>3</div><div>4</div>
</div>รูปแบบการไหลอัตโนมัติในคอลัมน์
แถบการ์ดที่เลื่อนในแนวนอน โดยคอลัมน์จะเพิ่มขึ้นตามความจำเป็น:
<div class="strip">
<div>Card 1</div><div>Card 2</div><div>Card 3</div>
</div>การจัดวางแน่นสำหรับแกลเลอรี
แกลเลอรีรูปภาพที่มีขนาดหลากหลายและเติมช่องว่าง:
<div class="gallery">
<div class="wide">Wide</div>
<div class="tall">Tall</div>
<div>3</div><div>4</div>
</div>กริดโดยปริยายและพื้นที่ที่มีชื่อ
พื้นที่ที่มีชื่อใช้ได้เฉพาะกับกริดที่กำหนดชัดเจน รายการที่วางในกริดโดยปริยายไม่สามารถใช้การจัดวางด้วยพื้นที่ที่มีชื่อได้โดยตรง แต่ต้องใช้การจัดวางด้วยหมายเลขเส้นหรือการครอบคลุม
การแสดงกริดโดยปริยายเป็นภาพ
ใน DevTools ของโครม ชั้นซ้อนทับเลย์เอาต์จะแสดงทั้งเส้นกริดที่กำหนดชัดเจน (เส้นทึบ) และเส้นกริดโดยปริยาย (เส้นประ) ซึ่งช่วยให้เข้าใจว่ารายการที่จัดวางอัตโนมัติจะไปอยู่ที่ใด
การควบคุมขนาดโดยปริยายของแต่ละรายการ
รายการที่ครอบคลุมหลายแถวในกริดโดยปริยายต้องใช้ grid-auto-rows เพื่อกำหนดขนาดอย่างถูกต้อง หากไม่กำหนด แถวโดยปริยายจะปรับขนาดตามเนื้อหา ซึ่งอาจทำให้เลย์เอาต์ไม่สม่ำเสมอ
ตรวจสอบอย่างรวดเร็ว
grid-auto-flow: row dense ทำหน้าที่อะไร
สรุปทบทวน
กริดโดยปริยายจะขยายกริดที่กำหนดชัดเจนด้วยแทร็กที่สร้างขึ้นโดยอัตโนมัติ grid-auto-rows/columns ควบคุมขนาดของแทร็กเหล่านี้ ส่วน minmax() ทำให้แทร็กยืดหยุ่นได้ grid-auto-flow กำหนดทิศทางการจัดวาง การจัดวางแบบ dense จะเติมช่องว่างอย่างเข้มข้น ซึ่งมีประโยชน์สำหรับเลย์เอาต์แบบคล้ายการเรียงอิฐ แต่อาจทำให้ลำดับที่มองเห็นเปลี่ยนไป
คำถามที่พบบ่อย
บทเรียน “กริดโดยนัยและ Grid-Auto-Flow” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “กริดโดยนัยและ Grid-Auto-Flow” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “กริดโดยนัยและ Grid-Auto-Flow”
ทำความเข้าใจวิธีที่ CSS Grid จัดการรายการที่อยู่นอกแทร็กที่ระบุไว้อย่างชัดเจนด้วยแถวและคอลัมน์โดยนัย คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “กริดโดยนัยและ Grid-Auto-Flow” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- เส้นที่มีชื่อและพื้นที่กริดที่มีชื่อ
- Auto-fit และ Auto-fill ด้วย minmax
- กริดโดยนัยและ Grid-Auto-Flow
- Subgrid สำหรับเนื้อหาซ้อนที่จัดแนวตรงกัน