รูปแบบที่ยืดหยุ่นแฟชั่นด้วย CSS Grid

Sep 11, 2025
วิธีการ
A woman sits at a laptop tweaking a CSS Grid layout

กริด CSS เหมาะสำหรับการสร้างเลย์เอาต์สองแกนของแถวและคอลัมน์ ไวยากรณ์นั้นง่ายและทำให้เค้าโครงหน้าเป็นเรื่องง่าย เลย์เอาต์ที่จำเป็นต้องมีหลายคอนเทนเนอร์ที่ซ้อนกันสามารถอธิบายได้ใน CSS

กริดทำงานต่างกันไปยังคุณสมบัติเค้าโครงอื่น ๆ เนื่องจากการใช้มูลค่า 'กริด' ไปยังคุณสมบัติ 'การแสดงผล' จะส่งผลกระทบต่อเด็กโดยตรงใด ๆ ตอนนี้องค์ประกอบเหล่านี้เป็นรายการกริดและจะอยู่ในตำแหน่งตามหลักเกณฑ์ที่คุณตั้งไว้ในผู้ปกครอง (เว้นแต่จะถูกวางเป็นพิเศษ)

ไปจับด้วยกริด

กริดนำคุณสมบัติใหม่จำนวนหนึ่ง:

  • ช่องว่างกริด

แทนที่จะใช้ระยะขอบกริดมีคุณสมบัติของตัวเองสำหรับการกำหนดช่องว่างระหว่างรายการกริดทำให้เค้าโครงของกริดถูกกำหนดและไม่ได้รับผลกระทบจากช่องว่างใด ๆ ระบบกริด (เช่นที่พบใน Onuit และ Twitter Bootstrap) มักจะพึ่งพาการตั้งค่าระยะขอบเชิงลบเพื่อจัดตำแหน่งทุกอย่างให้ถูกต้อง

  • หน่วย FR

สั้น ๆ สำหรับเศษส่วนหน่วยวัดใหม่นี้ใช้เพื่อแยกเค้าโครงออกเป็นเศษส่วนโดยมีหรือไม่มีช่องว่าง

  • ตำแหน่งกริด

CSS Grid ช่วยให้องค์ประกอบใด ๆ ที่จะจัดลำดับความสำคัญและวางตำแหน่งที่ใดก็ได้บนกริดก่อนรายการอื่น ๆ ทั้งหมดซึ่งจะอยู่ในตำแหน่งโดยอัตโนมัติ

  • พื้นที่กริดและเทมเพลต

มีการกำหนดพื้นที่ที่มีชื่อบนกริดซึ่งสามารถอ้างอิงเพื่อกำหนดเค้าโครงในแฟชั่นเกือบ ASCII

  • MinMax ()

ค่าคุณสมบัติ 'MinMax ()' ช่วยให้คุณสามารถใช้ขนาดขั้นต่ำและสูงสุดสำหรับรายการกริดคอลัมน์และแถว คุณสมบัตินี้หายไปจาก Flexbox และโมดูลเค้าโครงอื่น ๆ ใน CSS

สร้างกริดของคุณ

พื้นที่และเทมเพลตที่ทรงพลังของ CSS Grid เปิดใช้งานเลย์เอาต์ที่ซับซ้อนได้อย่างง่ายดาย คุณเริ่มต้นด้วยการใช้ชื่อกับองค์ประกอบภายในตารางของคุณโดยใช้คุณสมบัติ 'พื้นที่กริด' - ตัวอย่างเช่น 'ส่วนหัว {Grid-Area: Header; } ' เมื่อคุณตั้งชื่อทุกพื้นที่ในกริดของคุณแล้วคุณสามารถใช้คุณสมบัติ 'ตารางเทมเพลต - พื้นที่' เพื่ออธิบายเค้าโครง 

 กริด - เทมเพลตพื้นที่:
  "หัวเรื่องส่วนหัวส่วนหัว"
  "บทความด้านซ้ายของแถบด้านข้างขวา"
  "Footer Footer Footer"
;

ตัวอย่างโค้ดข้างต้นอธิบายถึงตารางสามต่อสามคุณเพียงแค่ทำซ้ำชื่อของรายการกริดหากคุณต้องการให้มันขยายหลายคอลัมน์หรือแถว นอกจากนี้คุณยังสามารถใช้แบบสอบถามแบบมีเดียเพื่อเปลี่ยนเค้าโครงกริดสำหรับหน้าจอขนาดแตกต่างกัน

จากนั้นคุณสามารถใช้หน่วย 'FR' ใหม่เพื่อกำหนดความกว้างของการแยกระหว่างคอลัมน์ที่แตกต่างกัน: 

 Grid-Template-Columns: 1FR 3FR 1FR;

ตัวอย่างที่แสดงด้านบนจะแบ่งความกว้างที่มีอยู่เป็นค่าความกว้างเท่ากันห้าค่า กล่าวอีกนัยหนึ่งมันจะใช้หนึ่งในห้าเป็นคอลัมน์แรกสามในห้าไปยังคอลัมน์ที่สองและที่ห้าสุดท้ายไปยังคอลัมน์สุดท้าย

ในการปรับขนาดแถวคุณสามารถใช้ค่าคุณสมบัติ 'MinMax' ใหม่เพื่อให้ขนาดคอลัมน์ด้านบนและด้านล่างไปยังเนื้อหาของพวกเขาจากนั้นให้แถวกลางเพื่อขยายพื้นที่ที่เหลืออยู่ในกริด 

 กริดเทมเพลตแถว:
  MinMax (Min-Content, Max-Content)
  อัตโนมัติ
MinMax (Min-content, Max-Content);

บทความนี้ได้รับการตีพิมพ์ครั้งแรกในฉบับที่ 271 ของผู้ออกแบบเว็บออกแบบเว็บสร้างสรรค์ ซื้อ ปัญหา 271 หรือ สมัครสมาชิกเว็บนักออกแบบเว็บไซต์ .

ต้องการเสริมทักษะกริด CSS ของคุณหรือไม่

Brenda Storer is giving her talk Using CSS Grid in the Real World at Generate New York from 25 - 27 April 2018

Brenda Storer ให้การพูดคุยของเธอโดยใช้ CSS Grid ในโลกแห่งความเป็นจริงที่สร้างนิวยอร์กตั้งแต่ 25 - 27 เมษายน 2018

ในฐานะนักออกแบบและนักพัฒนาซอฟต์แวร์ Front-end ที่หน่วยงานพัฒนาซอฟต์แวร์ Brenda Storer ได้ใช้ CSS Grid ในการผลิตเว็บไซต์ตั้งแต่เปิดตัวเบราว์เซอร์ในเดือนมีนาคม 2560 และเป็นแฟนตัวยง

ในการพูดคุยของเธอที่ สร้างนิวยอร์กตั้งแต่วันที่ 25-27 เมษายน 2561 เบรนด้าจะแสดงวิธีการที่คุณสามารถปรับปรุงเว็บไซต์ของคุณได้อย่างต่อเนื่องด้วย CSS Grid และเขียน Bulletproof Fallback สำหรับเบราว์เซอร์รุ่นเก่า (หรือแม้กระทั่งใช้งานกรอบกริดปัจจุบันของคุณในฐานะ FALLBACK) ทั้งหมดที่มี CSS บริสุทธิ์: ไม่ต้องใช้จาวาสคริปต์ .

สร้างนิวยอร์กเกิดขึ้นตั้งแต่วันที่ 25-27 เมษายน 2561 รับตั๋วของคุณตอนนี้ .

บทความที่เกี่ยวข้อง:

  • เปิดเผยความลับเค้าโครง CSS กริด
  • สร้างเค้าโครงที่ตอบสนองด้วยกริด CSS
  • รับความเร็วสูงสุดด้วย CSS Grid

วิธีการ - บทความยอดนิยม

สร้างบอทหย่อนที่กำหนดเอง

วิธีการ Sep 11, 2025

(เครดิตภาพ: นักออกแบบเว็บไซต์) Slack เป็นเครื่�..

แผ่นตัวละครสำหรับ 3D Modellers: 15 เคล็ดลับยอดนิยม

วิธีการ Sep 11, 2025

(เครดิตภาพ: Dahlia Khodur) แผ่นอักขระเป็นคำสั่งของว..

วิธีการวาดแขน

วิธีการ Sep 11, 2025

(เครดิตภาพ: Patrick J Jones) การเรียนรู้วิธีการวาดแข�..

ต้นแบบสภาพแวดล้อมขนาดใหญ่ใน 3DS Max

วิธีการ Sep 11, 2025

เป้าหมายของชิ้นนี้คือการผลิตชิ้นส่วนของ ศ..

ทำให้ตัวละครของคุณปรากฏด้วยสีและแสง

วิธีการ Sep 11, 2025

ฉันชอบทำงานสีจริง ๆ ไม่ว่าจะเป็น Photoshop CC หร�..

สี่ทฤษฎีของกลยุทธ์ UX

วิธีการ Sep 11, 2025

ประสบการณ์ผู้ใช้ที่เป็นตัวเอก ( ux ) กลยุทธ�..

วิธีใช้การผสมผสานรูปร่างเป็นตัวละครเคลื่อนไหว

วิธีการ Sep 11, 2025

ในขณะที่เสื้อผ้าของคุณ โมเดล 3 มิติ การใช้กระดูกมีประสิทธ�..

วาดกระดูกและกล้ามเนื้อที่แม่นยำ

วิธีการ Sep 11, 2025

กายวิภาคศาสตร์เป็นวิชาขนาดใหญ่และต้องการการ..

หมวดหมู่