ตัวสร้าง CSS Grid

fr ย่อมาจาก "fraction of the available free space" หรือส่วนแบ่งของพื้นที่ว่างที่มีอยู่ หลังจากคอลัมน์ขนาดคงที่ (px, auto) ใช้พื้นที่ของตัวเองแล้ว ความกว้างที่เหลือจะถูกแบ่งเป็น fraction grid-template-columns: 1fr 2fr 1fr สร้างสามคอลัมน์โดยคอลัมน์กลางได้พื้นที่เป็นสองเท่าของคอลัมน์ด้านข้างแต่ละฝั่ง การใช้ fr เป็นวิธีที่แนะนำในการสร้างกริดแบบยืดหยุ่นที่ปรับตามความกว้างหน้าจอต่างๆ โดยไม่ต้องใช้ media queries

แยกขนาดแต่ละ track ด้วยช่องว่าง: grid-template-columns: 200px 1fr 1fr สร้าง sidebar ขนาดคงที่ 200px และสองคอลัมน์แบบยืดหยุ่นที่เท่ากัน คุณสามารถผสมหน่วยได้: 1fr auto 1fr ทำให้คอลัมน์กลางหดตามความกว้างของเนื้อหา ชื่อย่อ repeat() ช่วยลดการเขียนซ้ำ: repeat(3, 1fr) เหมือนกับ 1fr 1fr 1fr ทุกประการ เครื่องมือนี้สร้างชื่อย่อที่ถูกต้องในผลลัพธ์ CSS

gap (เดิมคือ grid-gap) เพิ่มพื้นที่ระหว่าง track ของกริด ไม่ใช่ที่ขอบด้านนอก ซึ่งเกือบทุกครั้งคือสิ่งที่ต้องการ: ช่องว่างสม่ำเสมอระหว่างเซลล์โดยไม่มี padding พิเศษรอบคอนเทนเนอร์ margin เพิ่มพื้นที่รอบไอเทม Grid แต่ละชิ้น ซึ่งจะไม่สม่ำเสมอที่ขอบและเพิ่มขนาดรวมของคอนเทนเนอร์ ใช้ gap สำหรับช่องว่างระหว่างเซลล์ และ padding บน Grid container สำหรับพื้นที่หายใจรอบเลย์เอาต์ทั้งหมด

ตั้งค่า grid-column-start และ grid-column-end บนไอเทม เช่น grid-column: 1 / 3 ทำให้ไอเทมเริ่มที่เส้น 1 และสิ้นสุดที่เส้น 3 ครอบคลุม 2 คอลัมน์ คุณยังใช้คีย์เวิร์ด span ได้: grid-column: span 2 ตรรกะเดียวกันใช้กับแถวด้วย grid-row เลือก Grid item ในเครื่องมือนี้และตั้งค่า start/end เพื่อสร้าง CSS ที่ถูกต้องโดยอัตโนมัติ

ทั้งสองทำงานกับ repeat() เพื่อสร้าง track ให้มากที่สุดเท่าที่จะใส่ในคอนเทนเนอร์: repeat(auto-fill, minmax(200px, 1fr)) ความแตกต่างเกิดขึ้นเมื่อไอเทมไม่เต็มทุกคอลัมน์ที่มี auto-fill คงคอลัมน์ว่างไว้ในกริด รักษาโครงสร้าง track auto-fit ยุบคอลัมน์ว่างให้เป็นศูนย์และให้ไอเทมที่มีขยายเต็มพื้นที่ สำหรับกริดการ์ดแบบ responsive ส่วนใหญ่ auto-fit ให้พฤติกรรมที่เป็นธรรมชาติกว่า

grid-template-areas ช่วยให้คุณกำหนดเลย์เอาต์ด้วยแผนผัง ASCII แบบภาพ ตัวอย่าง: grid-template-areas: "header header" "sidebar content" "footer footer" จากนั้นกำหนดไอเทมให้กับพื้นที่ด้วย grid-area: header, grid-area: sidebar เป็นต้น วิธีนี้ทำให้เลย์เอาต์ที่ซับซ้อนอ่านง่ายและปรับโครงสร้างได้สะดวกด้วย media query เพียงแค่กำหนด grid-template-areas ใหม่สำหรับ breakpoint ที่ต้องการ

ไม่ ทุกอย่างทำงานในเบราว์เซอร์ของคุณ การกำหนดค่า Grid ของคุณไม่เคยออกจากเครื่องของคุณ