CSS GRID LAYOUT😊
CSS Grid Layout คืออะไร มาดูกันนนนนนนนนนนนนนนนน
CSS Grid layout มีไว้สำหรับกำหนดการแสดงผล หรือจัด layout สองมิติ และช่วยให้ผู้เขียนจัดองค์ประกอบให้เป็นคอลัมน์และแถวได้เช่นเดียวกับตาราง ด้วยการแบ่งพื้นที่ออกเป็นส่วนๆ ซึ่งจะประกอบไปด้วย parent หรือเรียกกันว่า grid container และ children หรือที่เรียกอีกอย่างหนึ่งว่า grid item
มาเริ่มกันที่อันแรกกันเลยยยยยย
display: grid | inline-grid
เป็นการกำหนด display: grid ใน grid container เพื่อบอกว่าจะใช้การแสดงผลแบบ grid ซึ่งจะมี inline-grid ที่สามารถใช้ได้เหมือนกัน
grid-template
ประกอบด้วย grid-template-columns, grid-template-rows และ grid-template-areas
- grid-template-columns : การกำหนด column ของ grid ตารางที่มีรายการค่าที่คั่นด้วยช่องว่าง ค่าแสดงขนาดแทร็กและช่องว่างระหว่างค่า แสดงถึง grid line โดยจะกำหนดค่าจาก ซ้ายไปขวา
- grid-template-rows : กำหนดความสูงของ row ของ grid ตารางที่มีรายการค่าที่คั่นด้วยช่องว่าง ค่าแสดงขนาดแทร็กและช่องว่างระหว่างค่า แสดงถึง grid line โดยจะกำหนดค่า บนลงล่าง
ค่าที่กำหนด
- <track-size> สามารถกำหนดความยาวเป็น %, px หรือ fr ของพื้นที่ว่างในตาราง
- <line-name> ชื่อที่เลือกตามความต้องการ
- grid-template-areas: กำหนด grid template โดยการอ้างอิงชื่อของ grid-area ที่ระบุด้วยคุณสมบัติ grid-area
ค่าที่กำหนด
- <grid-area-name> : ชื่อของ grid area
- . (จุด) : การกำหนดให้เป็นพื้นที่วาง
- none : ไม่มีการกำหนด grid area
จาก code ที่กำหนด grid-template-areas เมื่อเปรียบเทียบกับรูปภาพจะเห็นได้ว่า
- row แรก กำหนดให้เป็น header ทั้ง 4 column
- row สอง กำหนดให้เป็น main ใน 2 column แรก column ที่ 3 เป็น .(พื้นที่ว่าง) และ column สุดท้ายเป็น sidebar
- Row สุดท้าย กำหนดให้เป็น footer ทั้ง 4 column
grid-column-gap/grid-row-gap
การกำหนดความกว้างของช่องว่างของ columns และ rows
- grid-column-gap/column-gap : กำหนดขนาดของช่องว่างระหว่าง columns ใน grid layout
- grid-row-gap/row-gap : กำหนดขนาดของช่องว่างระหว่าง rows ใน grid layout
ค่าที่กำหนด
- <line-size> ค่าของขนาดความกว้าง
justify-items
การกำหนด grid ตามแกนให้สอดคล้องกับแกนของ block ซึ่งจะเรียงจากบนลงล่างของในแต่ละ block ของแต่ละ column ค่าที่กำหนดในการใช้ คือ
- start : จัดแนวให้ชิดกับฝั่งซ้ายของ container
- end : จัดแนวให้ชิดกับฝั่งขวาของ container
- center : จัดแนวเป็นจุดกึ่งกลางของ container
- stretch(default) : จัดแนวให้เต็ม container
align-items
การจักแนว grid items ตาม block(column) ค่าที่กำหนด คือ
- start : การจัด items ให้ติดขอบด้านบนของ block
- end : การจัด items ให้ติดขอบด้านล่างของ block
- center : จัดการ items ให้อยู่ระหว่างกลางของ block
- stretch(default) : จัดการ items ให้เต็มพื้นที่ของ block
justify-content
การจัดแนว grid justify-content จะมีคุณสมบัติในการจัดแนว row ซึ่งจะตรงข้ามกันกับ align-content ที่จัดแนวตาม block (column)
ค่าที่ใช้ในการกำหนด คือ
- start : จัดแนวเส้นตารางให้ชิดกับขอบเริ่มต้นของ grid container
- end : จัดแนวเส้นตารางให้ชิดกับขอบท้ายของ grid container
- center : จัดแนวเส้นตารางตรงกลางของ grid container
- stretch : ปรับขนาดรายการกริดเพื่อให้กริดเติมเต็มความกว้างของ grid container
- space-around : วางช่องว่างจำนวนเท่า ๆ กันระหว่างแต่ละ grid item ดยช่องว่างทั้ง 2 จะมีขนาดที่เท่ากัน จึงเห็นได้ว่า ช่องว่างที่ 2 จะมีขาดใหญ่กว่าอันแรกเพราะมันคือ 2 ช่องว่างรวมกัน
- space-between : วางช่องว่างจำนวนเท่า ๆ กันระหว่างแต่ละ grid item โดยไม่มีช่องว่างที่ติดกับขอบทั้ง 2 ฝั่ง
- space-evenly : วางช่องว่างจำนวนเท่า ๆ กันระหว่างแต่ละ grid item ให้มีขนาดที่เท่าๆกัน
align-content
กำหนดรูปแบบการ align cell ในตาราง คล้ายกับ justify-content แต่จะเป็นในตั้งแทน(column) ซึ่ง ค่าที่สามารถกำหนดได้จะเหมือนกับ justify-content ทุกอย่าง
- start — จัดแนว grid ให้ชิดกับขอบเริ่มต้นของ grid container
- end — จัดแนว grid ให้ชิดกับขอบท้ายของ grid container
- center — จักแนว grid ให้อยู่ตรงกลาของ grid container
- stretch — การปรับขนาดของ grid item เพื่อให้ grid มีขนาด grid container
- space-around — วางช่องว่างจำนวนเท่า ๆ กันระหว่างแต่ละ grid โดยช่องว่างทั้ง 2 จะมีขนาดที่เท่ากัน จึงเห็นได้ว่า ช่องว่างที่ 2 จะมีขาดใหญ่กว่าอันแรกเพราะมันคือ 2 ช่องว่างรวมกัน
- space-between — วางช่องว่างจำนวนเท่า ๆ กันระหว่างแต่ละ grid ให้ชิดกับของทั้ง 2 ฝั่งของ grid container
- space-evenly — วางช่องว่างจำนวนเท่า ๆ กันระหว่างแต่ละ grid ให้มีช่องว่างที่เท่ากันทั้งหมด
😊😊😊😊😊😊😊😊😊😊😊😊😊😊😊😊😊😊😊😊😊😊😊😊
