เราบอกคุณว่าอย่างไร CSS กริดช่วยให้คุณสร้างมาร์กอัปตอบสนองคุณภาพสูงโดยไม่ต้องใช้เฟรมเวิร์กของบุคคลที่สามเช่น Bootstrap

Native Grid มีข้อได้เปรียบเหนือเฟรมเวิร์กมากมาย โดยเฉพาะอย่างยิ่งเมื่อเปรียบเทียบกับ Bootstrap ที่ได้รับความนิยมสูงสุด เนื่องจาก CSS สมัยใหม่ช่วยให้คุณสร้างมาร์กอัปที่ซับซ้อนได้โดยไม่ต้องใช้ JavaScript โค้ดของคุณจึงสะอาดตาและดูแลรักษาง่ายกว่า

มาร์กอัปอาจง่ายกว่านี้

การแทนที่ Bootstrap ด้วย CSS Grid จะทำให้ HTML สะอาดขึ้น ยกตัวอย่างพิจารณาส่วนเล็กๆ ของหน้าที่เราจะต้องจัดวาง มีลักษณะดังนี้:

บูทสแตรป

ขั้นแรก มาดูโค้ดตัวอย่างสำหรับหน้านี้ใน Bootstrap

มีบางสิ่งที่ต้องใส่ใจกับ:

— แต่ละแถวควรอยู่ใน div ของตัวเอง
- คุณต้องใช้ชื่อคลาสเพื่อสร้างมาร์กอัป (col-xs-2)
— เมื่อเทมเพลตขยายและซับซ้อนมากขึ้น สิ่งเดียวกันนี้จะเกิดขึ้นกับโค้ด HTML

หากเราพูดถึงการตอบสนอง มาร์กอัปจะดูแย่ลงไปอีก:

CSS กริด

ตอนนี้เรามาดูตัวอย่างเดียวกันของมาร์กอัปใน CSS ล้วนๆ:

มาร์กอัปนี้อ่านง่ายกว่ามาก ความยุ่งเหยิงของคลาสหายไปและจำนวน div ก็ลดลง

แน่นอนว่าไม่เหมือนกับตัวอย่างที่ Bootstrap เชื่อมต่อกับเพจ คุณต้องอธิบายสไตล์ด้วยตัวเองที่นี่:

มีความยืดหยุ่นมากขึ้น

มาทำงานเกี่ยวกับการปรับตัวกันดีกว่า เช่น ให้ลบ MENU ออกจาก แถวบนสุดสำหรับหน้าจอมือถือ กล่าวอีกนัยหนึ่ง เรามาเปลี่ยนสิ่งนี้กัน:

CSS กริด

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

ด้วยวิธีนี้ คุณไม่จำเป็นต้องเปิด HTML เพื่อออกแบบหน้าใหม่ด้วยซ้ำ

บูทสแตรป

หากนักพัฒนาจำเป็นต้องเปลี่ยนแปลงบางอย่างในเทมเพลต Bootstrap เขาจะต้องเริ่มต้นด้วยการเปลี่ยน HTML เอง ที่จริงแล้ว คุณต้องย้าย MENU เพื่อให้อยู่เหนือ HEADER

ในกรณีนี้ เพียงแค่เปลี่ยนลักษณะการทำงานของสไตล์ในการสืบค้นสื่อจะไม่ทำงาน เพื่อแก้ปัญหานี้คุณต้องหันไปใช้ JavaScript

ไม่มีการจำกัด 12 คอลัมน์อีกต่อไป

ไม่ใช่ว่านี่เป็นข้อจำกัดร้ายแรง แต่ในบางกรณีก็ทำให้เกิดความไม่สะดวก เนื่องจาก ตาราง Bootstrapโดยพื้นฐานแล้วแบ่งออกเป็น 12 คอลัมน์ ปัญหาอาจเกิดจากการหารเป็น 5, 7 หรือ 9 คอลัมน์

CSS Grid ช่วยให้คุณสร้างคอลัมน์ได้มากเท่าที่คุณต้องการ

ซึ่งทำได้โดยการตั้งค่าคุณสมบัติ grid-template-columns:

อย่างไรก็ตาม มันใช้ flexbox ซึ่งทำให้ง่ายต่อการจัดการมาร์กอัปผ่าน CSS แต่ในขณะนี้ ยังไม่ออกจากรุ่นเบต้าด้วยซ้ำ

รองรับเบราว์เซอร์

ในขณะที่เขียนบทความนี้ 75% ของเบราว์เซอร์รองรับ CSS Grid

ไม่มีอะไรหยุดนักพัฒนาจำนวนมากจากการเริ่มใช้ CSS Grid ได้ในขณะนี้ แต่น่าเสียดาย ไม่ใช่ทุกโครงการที่พร้อมจะทำงานด้วยวิธีการจัดวางนี้ อย่างไรก็ตาม นักพัฒนาที่มีชื่อเสียงหลายคน เช่น Morten Rand-Eriksen จาก LinkedIn และ Jen Simmons จาก Mozilla เชื่อมั่นว่าแนวทางการสร้างเพจนี้คืออนาคต: การแสดงภาพควรแยกออกจากตรรกะ JavaScript และปรับให้เป็นอิสระจากตรรกะนั้น

จากผู้เขียน:บทความจากแนวคิดซีรีส์ของโครงร่าง CSS Grid ในบทเรียนก่อนหน้านี้ เราได้เรียนรู้ไวยากรณ์ของตาราง เรียนรู้หลายวิธีในการจัดเรียงองค์ประกอบบนหน้า และบอกลานิสัยเก่าๆ บางอย่าง ในบทช่วยสอนนี้ เราจะใช้ความรู้ทั้งหมดของเราเพื่อสร้าง รูปแบบที่ปรับเปลี่ยนได้ในทางปฏิบัติ

สื่อสอบถาม

เรามาสาธิตจากบทเรียนที่แล้วกัน

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

เราจะเริ่มต้นด้วยการคัดลอกประกาศของกริดแรก มารวมรายการที่ซ้ำกันลงในคิวรีสื่อโดยใช้เทคนิคที่เน้นอุปกรณ์เคลื่อนที่เป็นอันดับแรก ฉันเอา 500px เป็นจุดเปลี่ยนโดยพลการ

Grid-1 ( /* grid styles */ ) @media only screen และ (ความกว้างขั้นต่ำ: 500px) ( .grid-1 ( /* grid styles */ ) )

ตอนนี้เราจะเปลี่ยนตารางในโฆษณาแรกเพื่อรวมทุกอย่างไว้ในคอลัมน์เดียว เราตั้งค่าหนึ่งคอลัมน์โดยใช้คุณสมบัติ grid-template-columns ตรวจสอบว่าสี่แถวของเราได้รับการตั้งค่าผ่านคุณสมบัติ grid-template-rows และจับคู่เค้าโครงโดยใช้คุณสมบัติ grid-template-areas:

Grid-1 ( จอแสดงผล: grid; ความกว้าง: 100%; อัตรากำไรขั้นต้น: 0 อัตโนมัติ; grid-template-columns: 1fr; grid-template-rows: 80px auto auto 80px; grid-gap: 10px; grid-template-areas: " ส่วนหัว" "หลัก" "แถบด้านข้าง" "ส่วนท้าย"; )

เพื่อให้พอดีกับหน้าจอขนาดเล็ก เราตั้งค่า grid-gap เป็น 10px ตามค่าเริ่มต้น นี่คือสิ่งที่เราได้รับ คุณควรสังเกตด้วยว่าเราเปลี่ยนคุณสมบัติช่องว่างภายในและขนาดแบบอักษรขององค์ประกอบ .grid-1 div โดยใช้คำสั่งสื่อ

ตารางที่ซ้อนกันของเรา

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

Item-2 ( /* grid styles */ ) @media only screen และ (ความกว้างขั้นต่ำ: 600px) ( .item-2 ( /* grid styles */ ) )

หากเราต้องทำซ้ำการสาธิตด้วยการป้อนอัตโนมัติและเปลี่ยนความกว้างของคอลัมน์เป็น minmax (9em, 1fr) ตารางจะพยายามปรับแทร็กที่มีความกว้าง 9em ให้ได้มากที่สุด จากนั้นจึงขยายเป็น 1fr จนกว่าคอนเทนเนอร์ทั้งหมดจะเต็ม:

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

บทสรุป

มาสรุปทั้งหมดข้างต้นในรายการ:

การสืบค้นสื่อช่วยให้เราสามารถสร้างกริดใหม่ได้อย่างสมบูรณ์โดยการเปลี่ยนคุณสมบัติ grid-template-areas (และอื่น ๆ ) สำหรับสถานการณ์ที่แตกต่างกัน

ทรัพย์สินการเปลี่ยนแปลงไม่ส่งผลต่อเค้าโครงตารางแต่อย่างใด

คำสำคัญที่เติมอัตโนมัติทำงานได้ดีในการเติมคอนเทนเนอร์กริด

ฟังก์ชัน minmax() เป็นส่วนเสริมที่ดีในการเติมข้อความอัตโนมัติ แต่ไม่ได้ช่วยให้เราปรับตัวได้อย่างแท้จริง

ตอนนี้คุณพร้อมที่จะทำงานกับตาข่ายแล้ว! คอยติดตามบทความ CSS Grid เพิ่มเติม แบบฝึกหัดเชิงปฏิบัติ และวิธีแก้ไขปัญหากริดทั่วไป

ในบทความนี้ คุณจะพบกับหลักสูตรฉบับสมบูรณ์เกี่ยวกับกริด CSS เราจะดูว่ามันคืออะไร อะไรคือความแตกต่างระหว่าง FlexBox และวิธีทำงานกับ CSS Grid

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

ตาราง CSSเรียกได้ว่าเป็นรุ่นที่เจ๋งกว่าและปรับปรุงแล้ว เฟล็กซ์บ็อกซ์เนื่องจาก FlexBox ช่วยให้คุณทำงานในระนาบเดียวเท่านั้น: สร้างคอลัมน์หรือสร้างแถว

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

เราขอเชิญคุณชมวิดีโอเต็มเกี่ยวกับการเรียนรู้กริด CSS เพื่อทำความเข้าใจสาระสำคัญได้ทันที CSS กริด:

• บทเรียนเรื่อง ;

ในระหว่างบทเรียน มีการสร้างหน้าสามหน้า คุณสามารถคัดลอกรหัสสำหรับแต่ละหน้าได้ที่ด้านล่าง

ไฟล์แรก

ไฟล์ที่สอง

ไฟล์ที่สาม

หลักการทำงาน

การทำงานกับกริดนั้นง่ายมาก อัลกอริธึมของการกระทำที่นี่มีดังนี้:

1. เราสร้างบล็อกหลักหนึ่งบล็อกและวางบล็อกอื่นไว้ในนั้น ( ส่วนต่างๆ);
2. เพิ่มคุณสมบัติ display: grid ให้กับบล็อกหลัก
3. คุณสมบัติตาราง CSS สามารถนำไปใช้กับองค์ประกอบบล็อกหลักทั้งหมดได้แล้ว
4. เพิ่มคุณสมบัติต่างๆ คุณสามารถค้นหาเอกสารเกี่ยวกับคุณสมบัติที่เป็นไปได้ทั้งหมด

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

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

กาลครั้งหนึ่งฉันเขียนถึงบริการที่ไม่ธรรมดาซึ่งก็คือ AI ในการสร้างเว็บไซต์ เมื่อพิจารณาจากผลลัพธ์ในปัจจุบันพบว่า "พอใช้ได้" โดยเฉพาะเมื่อพิจารณาจากราคาที่ระบุ ในเรื่องนี้พวกเขาจะมีประสิทธิภาพมากขึ้น

วันนี้ฉันอยากจะพูดถึง "เทคโนโลยี" ที่มีชื่อคล้ายกัน แต่มีสาระสำคัญแตกต่างอย่างสิ้นเชิง - CSS Grid! โพสต์ประกอบด้วยหลายส่วน:

วิธีการสร้างเลย์เอาต์นี้ทำให้ง่ายต่อการสร้างตารางเว็บไซต์ที่ค่อนข้างยืดหยุ่นโดยใช้ CSS ในอนาคตคงจะนำไปใช้ได้ทุกที่ ถ้าฉันเข้าใจถูกต้อง มันเหมาะสำหรับงานเดียวกับ Flexbox แต่ไม่เหมือนกับมันสามารถทำงานในมิติสองมิติไปพร้อมๆ กัน (คอลัมน์และแถว) ด้านล่างนี้ฉันเสนอการแปลบทความซึ่งเป็นการแนะนำหัวข้อและมีตัวอย่างการศึกษาง่ายๆ ความสนใจ! ผู้เขียนบันทึกกำลังจัดหลักสูตรฟรี(!) บน CSS Grid ในเดือนธันวาคม หากคุณต้องการ โปรดส่งคำขอไปที่อีเมลของเขา

ฉันยังพบวิดีโอที่มีประโยชน์ในหัวข้อนี้บนอินเทอร์เน็ต บางทีอาจง่ายกว่าสำหรับบางคนที่จะรับรู้ข้อมูลเช่นนี้:

รู้เบื้องต้นเกี่ยวกับ CSS กริด

ในปีนี้เทคโนโลยีนี้ได้รับการรองรับในตัวใน Chrome, FF, Safari ดังนั้นจึงมีแนวโน้มว่าจะกลายเป็นเครื่องมือยอดนิยมในอนาคตอันใกล้นี้ แต่สำหรับตอนนี้ คุณต้องไม่ลืมที่จะดูแลเว็บเบราว์เซอร์ที่ล้าสมัยและล้าหลัง

ตาข่ายที่ง่ายที่สุด

มี 2 ​​วัตถุหลักที่นี่:

• parent / wrapper (ห่อบล็อกภายในทั้งหมดที่ประกอบขึ้น)
• ลูก/รายการ (องค์ประกอบเอง)

นี่คือการออกแบบที่ง่ายที่สุด:

Wrapper ( จอแสดงผล: ตาราง; )

อย่างไรก็ตาม หลังจากนี้ จะไม่มีอะไรเปลี่ยนแปลงไปมากนัก เนื่องจากไม่ได้กำหนดรูปแบบการแสดงผลไว้ คุณจะเห็น 6 DIV ติดตามกัน

คอลัมน์และแถว

หากต้องการทำให้ตารางของคุณเป็นสองมิติ คุณต้องระบุพารามิเตอร์ของแถวและคอลัมน์ - ใช้ตัวเลือก ตารางเทมเพลตแถวและ ตารางเทมเพลตคอลัมน์ตามลำดับ:

Wrapper ( แสดง: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 50px 50px; )

เนื่องจากคอลัมน์มีสามค่า จำนวนเท่ากันจึงถูกสร้างขึ้น ดังนั้นจึงมีเพียง 2 แถว ตัวเลขเป็นพิกเซลที่กำหนดในกรณีแรกคือความกว้างขององค์ประกอบ (แต่ละคอลัมน์ 100px) - ความสูง (50px)

นี่เป็นอีกตัวอย่างหนึ่งที่จะช่วยให้คุณเข้าใจวิธีการทำงานได้ดีขึ้น:

Wrapper ( แสดง: grid; grid-template-columns: 200px 50px 100px; grid-template-rows: 100px 30px; )

รูปภาพต่อไปนี้จะปรากฏขึ้น:

ที่ตั้งและขนาด

ด้วยคุณสมบัตินี้ คุณจะได้รับความสามารถที่ทรงพลังมากสำหรับการสร้างตารางกริดของไซต์ สมมติว่าเรามีขนาด 3x3:

Wrapper ( แสดง: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; )

หากโค้ด HTML ตามตัวอย่างของเรามี 6 องค์ประกอบ DIV (ดูที่จุดเริ่มต้น) ในกรณีนี้จะแสดงเพียง 2 แถวบนไซต์ ส่วนที่สามจะไม่ถูกเติมชั่วคราว อย่างไรก็ตามเมื่อเราเริ่มใช้พารามิเตอร์ที่แตกต่างกันสำหรับตำแหน่งและขนาดของบล็อก − ตาราง-คอลัมน์ ตารางแถวสถานการณ์จะเปลี่ยนไป

เรากำหนดสไตล์ให้กับวัตถุตัวใดตัวหนึ่ง:

รายการที่ 1 ( grid-column-start: 1; grid-column-end: 4; )

ซึ่งหมายความว่า DIV ที่มีคลาส item1 เริ่มต้นจากบรรทัดแรกของคอลัมน์ในตารางและสิ้นสุดในวันที่ 4 นั่นคือเติมเต็มทั้งแถว

จริงๆ แล้ว ตอนนี้วัตถุบางอย่างได้ย้ายไปที่บรรทัดสุดท้ายแล้ว ซึ่งเราได้เขียนไว้ล่วงหน้า (3x3) มีตัวเลือกที่ง่ายกว่า:

รายการที่ 1 ( ตาราง-คอลัมน์: 1 / 4; )

Item1 ( grid-column-start: 1; grid-column-end: 3; ) .item3 ( grid-row-start: 2; grid-row-end: 4; ) .item4 ( grid-column-start: 2; ตาราง-คอลัมน์-end: 4)

มันให้ภาพต่อไปนี้แก่เรา:

คุณจัดการเพื่อคิดออกหรือไม่? โดยหลักการแล้ว ไม่ใช่เรื่องยาก แต่คุณต้องเข้าใจว่านี่เป็นเพียงส่วนพื้นฐานของความแตกต่างของ CSS Grid

การสร้างต้นแบบและพื้นที่เลย์เอาต์ด้วย CSS Grid

รหัสมาร์กอัปมีดังนี้ (HTML):

คอนเทนเนอร์ ( จอแสดงผล: grid; grid-template-columns: ซ้ำ (12, 1fr); grid-template-rows: 50px 350px 50px; grid-gap: 5px; )

หากทุกอย่างชัดเจนในหลักการเกี่ยวกับแถว ก็จำเป็นต้องชี้แจงคอลัมน์ ที่นี่ในความหมาย ตารางเทมเพลตคอลัมน์ตารางถูกสร้างขึ้นที่ประกอบด้วย 12 คอลัมน์ที่เหมือนกัน (ความกว้างของแต่ละคอลัมน์ = 1/12 ของทั้งหมด) + ระยะขอบ 5px ระหว่างคอลัมน์เหล่านั้น (grid-gap)

เพิ่มพื้นที่เทมเพลตตาราง

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

คอนเทนเนอร์ ( จอแสดงผล: grid; grid-gap: 5px; grid-template-columns: ทำซ้ำ(12, 1fr); grid-template-rows: 50px 350px 50px; grid-template-areas: "h h h h h h h h h h h h" "m m c c c c c c c c c c c c" "f f f f f f f f f f f f f" ; )

นี่คือการแสดงภาพตารางเว็บไซต์ของคุณใน CSS อักขระทั้งหมดในพารามิเตอร์นี้มี 3 บรรทัดและ 12 คอลัมน์ กำหนดโดยสตริงสูงกว่า ตัวอักษรแต่ละตัวสอดคล้องกับหนึ่งเซลล์ ชื่อในตัวอย่างสอดคล้องกับบล็อกของโค้ด HTML: ส่วนหัว (h), เมนู (m), เนื้อหา (c) และส่วนท้าย (f) แต่คุณสามารถใช้ตัวเลือกอื่นได้

การกำหนดเทมเพลตพื้นที่และการทดลอง

ในขั้นตอนถัดไป คุณ "ลิงก์เชิงตรรกะ" สัญลักษณ์คอนเทนเนอร์และองค์ประกอบ DIV:

ส่วนหัว ( พื้นที่ตาราง: h; ) .menu ( พื้นที่ตาราง: m; ) .content ( พื้นที่ตาราง: c; ) .footer ( พื้นที่ตาราง: f; )

เว็บไซต์จะแสดงเค้าโครงดังนี้:

และตอนนี้ความมหัศจรรย์ก็เริ่มต้นขึ้น มาสลับตัวอักษรบางตัวในพารามิเตอร์กัน ตารางเทมเพลตพื้นที่ตัวอย่างเช่น “c” และ “m” ในตำแหน่ง:

ตารางแม่แบบพื้นที่: "h h h h h h h h h h h h" "c c c c c c c c c c c c m m" "f f f f f f f f f f f";

ตารางจะดูแตกต่างออกไป:

โดยทั่วไปแล้วการเพิ่มความสามารถในการปรับตัวให้กับการออกแบบนี้ดูน่าทึ่ง คุณไม่สามารถทำเช่นนี้ด้วย HTML เพียงอย่างเดียว แต่ใน CSS ทุกอย่างเป็นไปได้: ". h h h h h h h h h h ."

"c c c c c c c c c m m" ". ก ก ก ก ก ก ก ก ก ก . -

ตารางเทมเพลตพื้นที่: ". h h h h h h h h h "

"c c c c c c c c c m m" ". ก ก ก ก ก ก ก ก ก ก ก

เว็บไซต์มีลักษณะดังนี้:

ไม่มีสคริปต์หรือ HTML - เป็นเพียงความมหัศจรรย์ของ CSS Grid!

ตัวอย่างกริดและเฟล็กซ์เพิ่มเติม

เรามีส่วนหัวและส่วนท้ายที่ขยายจนเต็มความกว้าง และระหว่างนั้นจะมีบล็อกเนื้อหาที่มีแถบด้านข้างสองแถบ ในกรณีแรก เมื่อหน้าจอลดลง วัตถุทั้งหมดจะยังคงอยู่ในตำแหน่งเดิม

หากคุณต้องการให้บล็อกอยู่ด้านล่างอีกบล็อกหนึ่ง ให้ทำดังนี้:

ตารางบล็อก 2 คอลัมน์

สมมติว่าเรามีเนื้อหาจำนวนมากและมีแถบด้านข้างอยู่ตรงกลาง โค้ดด้านล่างนี้จะเก็บวัตถุทั้งหมดไว้เมื่อขนาดหน้าลดลง

เทคนิคที่สองคือการจัดเรียงทีละรายการ

การกระจายความกว้างขององค์ประกอบ

ตัวอย่างจะมีลักษณะคล้ายกับแกลเลอรี เมื่อรูปภาพทั้งหมดอยู่ติดกันในหลายคอลัมน์ เมื่อคุณลดขนาด ขนาดจะปรากฏในแต่ละบรรทัดน้อยลงเรื่อยๆ

ภาพภายในบทความ

ที่นี่เนื้อหาแบ่งออกเป็น 2 ส่วนและระหว่างนั้นจะมีบล็อกแบบเต็มหน้าจอ

ทั้งหมด.โดยทั่วไป ฉันค้นพบแนวคิดของ CSS Grid ซึ่งพูดตามตรงว่าฉันประทับใจมาก โดยเฉพาะเฟรมที่มีพื้นที่เค้าโครงด้วย ในตัวอักษรที่แตกต่างกัน- แน่นอนว่าทั้งหมดนี้เป็นเพียงพื้นฐานของ "เทคโนโลยี" และฉันไม่ได้อธิบายรายละเอียดแต่ละพารามิเตอร์ของโค้ด ใน ส่วนสุดท้ายบทความตัวอย่างมีความซับซ้อนมากกว่าและควรได้รับการตรวจสอบอย่างรอบคอบ มันรวมทั้ง Flex และ Grid หากหัวข้อนี้น่าสนใจ ให้สมัครรับหลักสูตรของผู้เขียนคนแรก - รายการอีเมลในบันทึกย่อฉบับแรกหรือฉบับที่สอง

คุณมีอะไรจะเพิ่มเกี่ยวกับ CSS Grid หรือไม่? — เขียนความคิด คำแนะนำ หรือส่งลิงก์ที่น่าสนใจ

บทความนี้จะแสดงวิธีการเปรียบเทียบนี้ เทคโนโลยีใหม่มันใช้งานได้และไม่ใช่แค่คำอธิบายคุณสมบัติพร้อมตัวอย่างผิวเผิน

บทความนี้เป็นการแปลแบบเพิ่มการตอบสนองของ CSS Grid Tutorial

โมดูล CSS Grid ได้รับการพัฒนาโดยคณะทำงาน CSS เพื่อมอบวิธีที่ดีที่สุดในการสร้างเทมเพลตใน CSS รวมอยู่ใน Candidate Recommendation ในเดือนกุมภาพันธ์ 2017 และเบราว์เซอร์หลักๆ เริ่มรองรับในเดือนมีนาคม 2017

CSS Grid จะกลายเป็นส่วนสำคัญของชุดเครื่องมือของนักพัฒนาส่วนหน้าในไม่ช้า และถ้าคุณเป็นหนึ่งในนั้น คุณจะต้องเรียนรู้ CSS Grid — ซึ่งเกือบจะเป็นทักษะที่ไม่สามารถต่อรองได้สำหรับตำแหน่งการพัฒนาส่วนหน้า

ด้วยฟังก์ชันการทำงานอันทรงพลังและไวยากรณ์ที่ใช้งานง่ายนี้ เทมเพลตกริดจะเปลี่ยนวิธีการสร้างเว็บอย่างไม่ต้องสงสัย

การแนะนำ

CSS Grid คือ รุ่นใหม่เทมเพลต ปรับให้เหมาะสมสำหรับเทมเพลตสองมิติ เป็นโมเดลในอุดมคติสำหรับเทมเพลตเว็บไซต์ แบบฟอร์ม แกลเลอรี และทุกสิ่งที่ต้องการตำแหน่งที่แม่นยำและตอบสนองได้ดี

ด้วยการพัฒนาของเว็บใน ปีที่ผ่านมาการพัฒนาเทมเพลตเว็บไซต์กลายเป็นเรื่องยากมากขึ้น ในช่วงปีแรก ๆ ของเว็บ ตาราง HTMLมักใช้สำหรับเทมเพลตแบบฟอร์ม ฯลฯ หลายคอลัมน์ แต่วิธีนี้ก็มีข้อเสียอยู่ ซึ่งหมายความว่าจะต้องนำเสนอในระดับมาร์กอัป ดังนั้นจึงไม่มีความแตกต่างระหว่างการนำเสนอและเนื้อหา ในความเป็นจริง ตารางถูกสร้างขึ้นเพื่อให้มีข้อมูลแบบตาราง ไม่ใช่เพื่อสร้างเทมเพลต และหากไม่มีการพูดถึงปัญหาด้านความหมาย เทมเพลตตารางจะไม่ถูกสร้างขึ้นสำหรับการออกแบบแบบตอบสนอง

ในที่สุด Floats ก็เข้ามาแทนที่เทมเพลตตารางซึ่งเป็นวิธีที่เป็นที่ยอมรับในระดับสากลและแนะนำสำหรับการสร้างเทมเพลต เนื่องจากช่วยให้เราสามารถวางตำแหน่งองค์ประกอบต่างๆ โดยไม่คำนึงถึงเค้าโครง อย่างไรก็ตาม แม้ว่าวิธีนี้จะถือเป็นการปรับปรุงที่สำคัญกว่ารูปแบบตาราง แต่ก็มีข้อจำกัดเช่นกัน โฟลตได้รับการออกแบบสำหรับเทมเพลตเอกสารเป็นหลัก และไม่เหมาะกับเทมเพลตแอปพลิเคชันที่ซับซ้อนซึ่งปัจจุบันพบเห็นได้ทั่วไปบนเว็บ องค์ประกอบแบบลอยเป็นเรื่องยากที่จะควบคุม โดยเฉพาะบนอุปกรณ์และวิวพอร์ต ขนาดที่แตกต่างกัน- สิ่งนี้นำไปสู่การแฮ็กแบบตารางต่างๆ ซึ่งกลายเป็นเรื่องปกติ ส่วนใหญ่ต้องใช้มาร์กอัปเพิ่มเติม ซึ่งเบี่ยงเบนไปจากแนวคิดทั้งหมดในการแยกเนื้อหา ดังนั้นคณะทำงาน CSS จึงมองหาโซลูชันที่ดีกว่า

โมเดล CSS Grid แก้ไขปัญหาเหล่านี้และอื่นๆ อีกมากมาย ช่วยให้คุณสร้างเทมเพลตขั้นสูงโดยใช้เวลาเพียงเล็กน้อยกับฟลีตและเขียนโค้ดน้อยลง

แต่แน่นอน คุณสามารถใช้ค่าที่แตกต่างกันสำหรับสิ่งนี้ เช่น 100px , 7em , 30% และอื่นๆ คุณยังสามารถกำหนดชื่อให้กับสตริงพร้อมกับขนาดของมันได้

ตารางเทมเพลตคอลัมน์: 1fr 1fr 1fr

เช่นเดียวกับข้างต้น กำหนดเฉพาะคอลัมน์ในกริดเท่านั้น

เผยให้เห็นช่องว่าง นั่นคือช่องว่างระหว่างองค์ประกอบตาราง ที่นี่เราใช้หน่วยความยาว vw ซึ่งสัมพันธ์กับความกว้างของวิวพอร์ต แต่เรายังสามารถใช้ 10px, 1em เป็นต้น คุณสมบัติ grid-gap เป็นการจดชวเลขสำหรับ grid-row-gap และ grid-column-gap คุณสมบัติ.

ส่วนอื่น ๆ ของโค้ดก็แค่กำหนด สไตล์ที่แตกต่างองค์ประกอบตาราง

#กริด >

ทำซ้ำ () ฟังก์ชัน

คุณสามารถใช้ฟังก์ชันทำซ้ำ() เพื่อประกาศค่าขนาดขององค์ประกอบซ้ำได้ ตัวอย่างเช่น แทนที่จะทำสิ่งนี้:

ตารางเทมเพลตแถว: 1fr 1fr 1fr 1fr 1fr;

เราสามารถทำได้:

ตารางเทมเพลตแถว: ทำซ้ำ (5, 1fr);

ซึ่งจะช่วยลดจำนวนโค้ดที่คุณต้องเขียนลงอย่างมาก โดยเฉพาะอย่างยิ่งหากคุณทำงานกับกริดขนาดใหญ่และซ้ำกัน

การสร้างเทมเพลตเว็บไซต์ด้วย CSS Grid

ตารางมีไวยากรณ์ "กราฟิก ASCII" ที่ใช้งานง่าย ซึ่งคุณสามารถ "ดู" เทมเพลตในโค้ดได้เสมือนจริง ทำให้ง่ายต่อการสร้างและแก้ไขเทมเพลตของคุณ แม้แต่การเปลี่ยนแปลงที่สำคัญก็สามารถทำได้ภายในไม่กี่วินาที ไวยากรณ์ที่ใช้งานง่ายนี้ยังช่วยในการออกแบบเว็บแบบตอบสนองอีกด้วย การสร้าง เทมเพลตที่แตกต่างกันสำหรับอุปกรณ์ต่าง ๆ จะกลายเป็นเรื่องเล็กน้อยเมื่อใช้กริด

ตอนนี้เรามาสร้างเทมเพลตเว็บไซต์ที่มีลักษณะดังนี้:

และนี่คือโค้ดสำหรับเทมเพลตนี้:

มาดูโค้ดของเรากันดีกว่า มาร์กอัป HTML มีลักษณะดังนี้:

และเราจะทำอย่างนั้น คอนเทนเนอร์กริด ดังนั้นองค์ประกอบอื่นๆ ทั้งหมดจึงกลายเป็นองค์ประกอบกริด

ตอนนี้เรามาดูกราฟิก ASCII ที่เราพูดถึงก่อนหน้านี้กันดีกว่า

พื้นที่เทมเพลตกริด: “ส่วนหัวส่วนหัว” “โฆษณาบทความนำทาง” “ส่วนท้ายส่วนท้าย”;

งานชิ้นนี้จะกำหนดเทมเพลตของเรา เพียงดูโค้ดเราจะเห็นว่าเป็นตารางขนาด 3x3 (สามแถวและสามคอลัมน์) สิ่งนี้ทำให้เรามีพื้นที่ตารางห้าช่องบนเซลล์ตารางเก้าเซลล์ เนื่องจากพื้นที่ตารางบางส่วนขยายหลายเซลล์

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

ตอนนี้เราสามารถกำหนดพื้นที่ตารางให้กับแต่ละองค์ประกอบได้แล้ว:

#pageHeader ( grid-area: header; ) #pageFooter ( grid-area: footer; ) #mainArticle ( grid-area: article; ) #mainNav ( grid-area: nav; ) #siteAds ( grid-area: ads; )

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

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

รหัสต่อไปนี้ให้ขนาดของแถวและคอลัมน์:

ตารางเทมเพลตแถว: 60px 1fr 60px;

ตารางเทมเพลตคอลัมน์: 20% 1fr 15%;

บรรทัดแรกและบรรทัดที่สามสูง 60px และบรรทัดที่สองใช้พื้นที่ที่เหลือทั้งหมด

คอลัมน์แรกคือ 20% และคอลัมน์ที่สามคือ 15% อันที่สองใช้พื้นที่ที่เหลือทั้งหมด

คุณสามารถเปลี่ยนเทมเพลตได้ง่ายๆ โดยการจัดเรียงพื้นที่กริดใหม่ใน grid-template-areas

ดังนั้นหากเราเปลี่ยนเป็นสิ่งนี้:

พื้นที่เทมเพลตกริด: “ส่วนหัวของส่วนหัวของ nav” “โฆษณาบทความของ nav” “โฆษณาส่วนท้ายของ nav”;

เป็นผลให้เราได้รับเทมเพลตต่อไปนี้:

อย่างไรก็ตาม คุณอาจต้องปรับขนาดหากคุณย้ายตารางที่เล็กลงไปยังตำแหน่งที่ใหญ่ขึ้น

ตัวอย่างเช่น เมื่อต้องการทำสิ่งนี้:

ขณะนี้การนำทางใช้พื้นที่ที่มีเนื้อหา ดังนั้นขนาดจึงได้รับการปรับขนาด ไม่เช่นนั้นเราจะมีเนื้อหาที่แคบและมีการนำทางที่กว้าง ดังนั้นโค้ดตอนนี้จะเป็นแบบนี้

Grid-template-areas: “header header header” “article nav ads” /* ก่อนหน้านี้มี “nav article ads” */ “footer footer footer”;

ตารางเทมเพลตแถว: 60px 1fr 60px;

ตารางเทมเพลตคอลัมน์: 1fr 20% 15%; /* ก่อนหน้านี้คือ '20% 1fr 15%' */

การสร้างกริดแบบปรับเปลี่ยนได้

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

ตัวอย่างการใช้การป้อนอัตโนมัติ:

นี่คือผลลัพธ์:

รหัสที่รับผิดชอบสิ่งนี้:

ตารางแม่แบบคอลัมน์: ทำซ้ำ (เติมอัตโนมัติ, ต่ำสุด (150px, 1fr));

ในนั้นคอลัมน์จะมีขนาดขั้นต่ำ 150px และพื้นที่ว่างสูงสุดสูงสุด รางดังกล่าวจะถูกทำซ้ำหลาย ๆ ครั้งตามความจำเป็นเพื่อให้พอดีกับคอนเทนเนอร์

ฟังก์ชัน Repeat() จะทำซ้ำคำจำกัดความของแทร็กตามจำนวนครั้งที่ระบุโดยพารามิเตอร์แรก การใช้การเติมอัตโนมัติจะทำให้แทร็กทำซ้ำได้มากที่สุดเท่าที่จะเป็นไปได้จนกว่าจะเต็มคอนเทนเนอร์

ขนาดของแทร็กเหล่านี้ระบุไว้ในพารามิเตอร์ตัวที่สอง ในกรณีของเรา เราใช้ minmax(150px, 1fr) เพื่อระบุว่าขนาดคอลัมน์ขั้นต่ำคือ 150px และขนาดสูงสุดคือ 1fr

ปรับให้พอดีอัตโนมัติ

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

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

ทำให้กริดเหมาะสำหรับการสืบค้นสื่อ เราสามารถกำหนดค่าใหม่ในกราฟิก ASCII และรวมผลลัพธ์ไว้ในคิวรีสื่อได้

นี่คือเทมเพลตแบบ 3 คอลัมน์บนวิวพอร์ตขนาดใหญ่ และจะบีบอัดเป็นคอลัมน์เดียวบนอุปกรณ์ขนาดเล็ก ดังนั้นตัวอย่างนี้จะดูแตกต่างออกไปขึ้นอยู่กับขนาดหน้าจอ ไม่ว่าในกรณีใด นี่คือโค้ดที่เกี่ยวข้องสำหรับเทมเพลตสามคอลัมน์สำหรับวิวพอร์ตแบบกว้าง

พื้นที่เทมเพลตกริด: “ส่วนหัวส่วนหัว” “โฆษณาบทความนำทาง” “ส่วนท้ายส่วนท้าย”;

และนี่คือรหัสที่เกี่ยวข้องสำหรับเวอร์ชันมือถือ:

พื้นที่เทมเพลตกริด: “ส่วนหัว” “บทความ” “โฆษณา” “นำทาง” “ส่วนท้าย”;

ดังนั้นประเด็นทั้งหมดคือการกำหนดค่าใหม่ในคุณสมบัติ grid-template-areas

ในกรณีของเรา เราได้รวมเวอร์ชันสำหรับมือถือไว้ในคิวรีสื่อ เช่นนี้

@media ทั้งหมด และ (ความกว้างสูงสุด: 575px) ( body ( grid-template-areas: “header” “article” “ads” “nav” “footer”; grid-template-rows: 80px 1fr 70px 1fr 70px; grid- เทมเพลตคอลัมน์: 1fr;

โปรดทราบว่าเราได้ปรับค่าใน grid-template-rows และ grid-template-columns เพื่อให้ตรงกับเทมเพลตใหม่ โดยเฉพาะอย่างยิ่งควรมีเพียงคอลัมน์เดียวและควรใช้พื้นที่ว่างทั้งหมด และเนื่องจากองค์ประกอบกริดทั้งหมดจะอยู่ในฮีปเดียว เราจะกำหนด 5 แถวและกำหนดความสูงของพวกมัน

การรวมกริดเข้ากับบล็อก

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

@media all และ (ความกว้างสูงสุด: 575px) ( body ( display: block; ) )

ซึ่งจะทำงานเหมือนกับในตัวอย่างด้านบน แต่โดยค่าเริ่มต้น องค์ประกอบจะปรากฏในลำดับเดิม ในตัวอย่างด้านบน เวอร์ชันมือถือจะมีการนำทางอยู่ใต้โฆษณา แต่ถ้าเราใช้ display: block การนำทางก็จะอยู่เหนือโฆษณา

นอกจากนี้ หากใช้วิธีนี้ คุณอาจต้องเพิ่มช่องว่างภายในเพื่อชดเชยการไม่มีช่องว่างที่รวมอยู่ในเวอร์ชันกริด

กริดที่ชัดเจนและโดยนัย

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

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

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

กริดโดยนัยจะถูกสร้างขึ้นโดยอัตโนมัติโดยคอนเทนเนอร์กริดเมื่อใดก็ตามที่องค์ประกอบของกริดอยู่นอกกริดที่ชัดเจน คอนเทนเนอร์สร้างแทร็กกริดโดยนัยโดยการเพิ่มแถวโดยนัยลงในกริด เส้นเหล่านี้ร่วมกับกริดที่ชัดเจน ก่อให้เกิดเส้นโดยนัย นี่คือตัวอย่าง:

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

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

การตั้งค่าขนาดแทร็กสำหรับกริดโดยนัย

คุณอาจสังเกตเห็นว่าแถวพิเศษไม่สูงเท่ากับสองแถวก่อนหน้า เนื่องจากเราตั้งค่าความสูงของแถวในคุณสมบัติ grid-template-rows แต่จะใช้ได้กับกริดที่ชัดเจนเท่านั้น ต้องตั้งค่าความสูงของแถวบนกริดโดยนัยโดยใช้คุณสมบัติ grid-auto-rows แต่เนื่องจากเราไม่ได้ทำสิ่งนี้ ปรากฎว่าแถวโดยนัยใช้ขนาดแทร็กอัตโนมัติ ซึ่งขึ้นอยู่กับเนื้อหา นี่คือลักษณะที่ตั้งของคุณสมบัติสำหรับการตั้งค่าขนาดแทร็ก:

โดยทั่วไปจะเป็นดังนี้:

ตารางที่ชัดเจนใช้ grid-template-rows และ grid-template-columns

ตารางโดยนัยใช้ grid-auto-rows และ grid-auto-columns

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

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

การตั้งชื่อเส้นกริด

คุณยังสามารถตั้งชื่อเส้นตารางเพื่อให้อ้างอิงได้ง่ายขึ้น ซึ่งสามารถทำได้โดยการตั้งค่าคุณสมบัติ grid-template-rows และ grid-template-columns เช่นที่นี่:

#grid ( display: grid; /* ตั้งค่าแทร็กและตั้งชื่อบรรทัด */ grid-template-rows: 50px 1fr 80px ; grid-template-columns: 120px 1fr 80px ; grid-gap: 5px; height: 90vh; ) .. /* ตอนนี้อ้างถึงบรรทัดที่มีชื่อเหล่านั้น */ #item2 ( grid-row-start: row3-start; grid-column-start: col2-start; grid-row-end: row3-end; grid-column-end : col3 -end)

บรรทัดที่มีชื่ออาจเป็นได้ทั้งแบบชัดแจ้งหรือโดยนัย เส้นที่มีชื่อโดยนัยจะถูกสร้างขึ้นเมื่อใดก็ตามที่คุณสร้างพื้นที่กริดที่มีชื่อโดยใช้ grid-template-areas

ชื่อนี้นำมาจากพื้นที่กริดโดยเพิ่ม -start และ -end ต่อท้าย ขึ้นอยู่กับว่าเป็นจุดเริ่มต้นหรือจุดสิ้นสุดของบรรทัด

ดังนั้น สำหรับแต่ละพื้นที่กริดที่มีชื่อส่วนหัว จะมีการสร้างบรรทัดโดยนัยสี่บรรทัด สองชื่อมีชื่อว่า header-start และ column-start ในพื้นที่กริดที่มีชื่อ และอีกสองชื่อมีชื่อว่า header-end ตามลำดับ

ตั้งชื่อพื้นที่กริด

พื้นที่กริดสามารถตั้งชื่อได้ในคุณสมบัติ grid-template-areas ของกริดคอนเทนเนอร์เอง นี่คือสิ่งที่เราทำก่อนหน้านี้เมื่อเราสร้างเทมเพลตไซต์ หากต้องการคืนค่าสิ่งนี้ในหน่วยความจำ ดูเหมือนว่านี้:

#grid ( display: grid; /* ตั้งชื่อพื้นที่กริด */ grid-template-areas: “a a” “b c”; ... ) ... /* ตอนนี้ใช้แต่ละองค์ประกอบกริดกับพื้นที่กริดที่มีชื่อ */ # a ( พื้นที่ตาราง: a; ) #b ( พื้นที่ตาราง: b; ) #c ( พื้นที่ตาราง: c; )

คุณสามารถระบุเซลล์ว่างได้โดยใช้จุด (.) หรือชุดของจุดที่ไม่มีช่องว่าง ตัวอย่างเช่น:

ตารางเทมเพลตพื้นที่: “a a” “ ข";

หรือตารางเทมเพลตพื้นที่: “ส่วนหัวส่วนหัว” “... เนื้อหา”;

คุณสมบัติการวางตำแหน่งกริด

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

grid-area - คุณสมบัตินี้เป็นชวเลขสำหรับ:

grid-column - คุณสมบัตินี้เป็นชวเลขสำหรับ:

grid-column-start — ระบุว่าบรรทัดคอลัมน์ใดขององค์ประกอบกริดที่กำลังเริ่มต้นและจำนวนแทร็กที่ขยายไปถึง

grid-column-end  — ระบุว่าองค์ประกอบตารางสิ้นสุดที่คอลัมน์บรรทัดใดและขยายไปถึงกี่แทร็ก

grid-row — คุณสมบัตินี้เป็นชวเลขสำหรับ:

grid-row-start — ระบุว่าองค์ประกอบกริดเริ่มต้นจากบรรทัดใดและขยายไปถึงกี่แทร็ก

คุณยังสามารถใช้คุณสมบัติ grid-auto-flow ซึ่งถูกกล่าวถึงในบทก่อนหน้านี้ได้ โดยระบุวิธีการวางองค์ประกอบตารางโดยอัตโนมัติในตาราง องค์ประกอบที่วางโดยอัตโนมัติคือองค์ประกอบที่ไม่ได้วางอย่างชัดเจนโดยใช้คุณสมบัติใดๆ ข้างต้น

สร้างตารางที่ซ้อนกัน

องค์ประกอบกริดสามารถกลายเป็นกริดใน CSS Grid ได้ นั่นคือ คุณสามารถซ้อนองค์ประกอบกริดภายในองค์ประกอบกริดอื่นได้ ซึ่งจะเป็นการสร้างกริดที่ซ้อนกัน

หากต้องการสร้างกริดแบบซ้อน สิ่งที่คุณต้องทำคือใช้ display: grid (หรือ display: inline-grid) กับองค์ประกอบกริด และองค์ประกอบจะกลายเป็นกริดเอง คุณยังสามารถใช้ display: subgrid เพื่อสร้าง subgrid มันเกิดขึ้นได้อย่างไร

มรดก

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

ตัวอย่างเช่น คุณตั้งค่าคอลัมน์ grid-auto-flow: บนกริดหลัก แต่คุณไม่ได้ตั้งค่าคุณสมบัติบนกริดที่ซ้อนกัน ในกรณีนี้ ตารางที่ซ้อนกันจะถูกตั้งค่าเป็นแถวเนื่องจากนั่นคือค่าเริ่มต้นสำหรับคุณสมบัตินี้

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

กริดย่อย

โมดูล CSS Grid ตั้งค่า subgrid สำหรับคุณสมบัติการแสดงผล อย่างไรก็ตาม เบราว์เซอร์บางประเภทยังไม่รองรับ ค่านี้น่าจะพิสูจน์ได้ว่ามีประโยชน์ทีเดียว

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

นี่คือรายการองค์ประกอบ:

• ชื่อ:
• ที่อยู่:
• โทรศัพท์:

และนี่คือ CSS โดยที่รายการเป็นตาราง และองค์ประกอบของรายการเป็นตารางย่อย

Ul ( จอแสดงผล: grid; grid: auto-flow / auto 1fr; ) li ( จอแสดงผล: subgrid; grid-column: span 2; Margin: 0.5em; border: solid; padding: 0.5em; ) label ( grid-column: 1; ) อินพุต (ตาราง-คอลัมน์: 2; )

ตัวอย่างนี้จะแสดงป้ายกำกับและการป้อนข้อมูลในแถว โดยมีเส้นขอบล้อมรอบแต่ละรายการ การให้แต่ละองค์ประกอบรายการเป็นตารางย่อยหมายความว่าไม่ควรมีปัญหาใดๆ กับการจัดตำแหน่งของแบบฟอร์มอินพุต เนื่องจากแต่ละองค์ประกอบรายการจะมีส่วนร่วมในการกำหนดขนาดของตารางหลัก

แบบฟอร์มการจัดตำแหน่งอัตโนมัติ

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

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

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

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

สิ่งนี้เป็นไปได้เนื่องจากเราสร้างฟอร์มให้เป็นตาราง (จอแสดงผล: ตารางนำไปใช้กับ .myForm) จากนั้นพวกเขาระบุว่าป้ายกำกับอยู่ในคอลัมน์หนึ่งและตัวควบคุมในอีกคอลัมน์หนึ่ง

นี่เป็นอีกตัวอย่างหนึ่ง คราวนี้มีองค์ประกอบเพิ่มเติม:

เมื่อตารางย่อยแพร่หลายในหมู่เบราว์เซอร์ จะเป็นไปได้ที่จะจัดองค์ประกอบแบบฟอร์มที่ไม่ใช่ทายาทโดยตรง