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

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

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

บน ในขณะนี้เฉพาะ IE 10+ และ Edge เท่านั้นที่รองรับข้อกำหนด Grid Layout - บนไซต์เชิงพาณิชย์ เทคโนโลยีนี้ยังใช้ไม่ได้

ใน โครมอันนี้สามารถเปิดใช้งานตัวเลือกนี้ได้ผ่านแฟล็ก "ฟีเจอร์แพลตฟอร์มเว็บทดลอง" ใน chrome://flags ใน Firefox – สถานะเค้าโครง.css.grid.enabled

อีกทางเลือกหนึ่งคือการใช้ polyfill และใช่ CSS Grid Polyfill มีอยู่จริง! คุณสามารถใช้ตัวเลือกใดก็ได้จากสามตัวเลือกที่อธิบายไว้และศึกษา Grid Layout ในขณะที่ยังอยู่ในช่วงเริ่มต้นของการพัฒนา

โปรดทราบ: ขณะนี้ใช้งานได้ใน IE รุ่นเก่าข้อกำหนดเฉพาะ ซึ่งหมายความว่าเบราว์เซอร์ไม่รองรับอย่างสมบูรณ์ ข้อกำหนดใหม่- เมื่อเราดูตัวอย่าง ฉันขอแนะนำให้คุณใช้ Chrome หรือ Firefox

คำศัพท์เฉพาะของระบบกริด

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

หน่วยวัด fr: ใช้สำหรับกำหนดขนาด พื้นที่ว่าง- ใช้ร่วมกับกริดแถวและกริดคอลัมน์ จากข้อกำหนด: “การจัดสรรพื้นที่จะเกิดขึ้นหลังจากถึง “ความยาว” หรือขนาดของแถวและคอลัมน์ของเนื้อหาทั้งหมดแล้วเท่านั้น ขนาดสูงสุด»

เส้น: เส้นแสดงถึงขอบเขตขององค์ประกอบอื่นๆ มีทั้งแนวนอนและแนวตั้ง ในภาพด้านล่างมีเส้นแนวตั้ง 4 เส้นและแนวนอน 4 เส้น

แทร็ก: แทร็กคือช่องว่างระหว่างเส้นคู่ขนาน ในภาพด้านล่างมีรางแนวตั้ง 3 รางและแนวนอน 3 ราง

เซลล์: เซลล์เป็นส่วนสำคัญของตาราง มีเพียง 9 เซลล์ในภาพด้านล่าง

พื้นที่: พื้นที่คือสี่เหลี่ยมจัตุรัสจำนวนเซลล์ตามต้องการ เหล่านั้น. แทร็กเป็นทั้งพื้นที่และเซลล์

การจัดตำแหน่งองค์ประกอบในตาราง

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

< div class = "grid-container" > < div class = "grid-element item-a" >ก< / div > < div class = "grid-element item-b" >บี< / div > < div class = "grid-element item-c" >ค< / div > < div class = "grid-element item-d" >ดี< / div > < div class = "grid-element item-e" >อี< / div > < div class = "grid-element item-f" >เอฟ< / div > < / div >

ในการสร้างกริด คอนเทนเนอร์จะต้องระบุคุณสมบัติ display:grid หรือ display:inline-grid รวมถึงสไตล์อื่นๆ:

ตารางคอนเทนเนอร์ ( จอแสดงผล: grid; grid-template-columns: 200px 10px 0.3fr 10px 0.7fr; grid-template-rows: auto 20px auto; )

ตาราง - คอนเทนเนอร์ ( จอแสดงผล: ตาราง; ตาราง - เทมเพลต - คอลัมน์ : 200px 10px 0.3fr 10px 0.7fr ; ตาราง - เทมเพลต - แถว : อัตโนมัติ 20px อัตโนมัติ ;

คุณสมบัติ grid-template-columns และ grid-template-rows กำหนดความกว้างของแถวและคอลัมน์ ในตัวอย่างด้านบน ฉันสร้าง 5 คอลัมน์ คอลัมน์กว้าง 10px ใช้เป็นตัวคั่นระหว่างองค์ประกอบ คอลัมน์แรกมีความกว้าง 200px คอลัมน์ที่สามใช้พื้นที่ 0.3 ของพื้นที่ที่เหลือ และคอลัมน์ที่ห้าใช้พื้นที่ที่เหลือ 0.7

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

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

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

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

เพื่อตั้งค่าเริ่มต้น เส้นแนวตั้งองค์ประกอบเราจะใช้คุณสมบัติ grid-column-start ในกรณีของเรา ค่าจะเป็น 3 คุณสมบัติ grid-column-end ระบุเส้นแนวตั้งสิ้นสุดขององค์ประกอบ ในกรณีของเราคือ 4 ค่าของเส้นแนวนอนตั้งค่าในลักษณะเดียวกัน

จากข้อมูลข้างต้น เราสรุปได้ว่าหากต้องการย้ายองค์ประกอบ B ไปยังเซลล์ที่สอง คุณต้องใช้โค้ด:

องค์ประกอบ-b ( grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2; )

องค์ประกอบ - ข ( ตาราง - คอลัมน์ - เริ่มต้น : 3 ; ตาราง - คอลัมน์ - สิ้นสุด : 4 ; ตาราง - แถว - เริ่มต้น : 1 ; ตาราง - แถว - สิ้นสุด : 2 ;

ในทำนองเดียวกัน หากต้องการย้ายองค์ประกอบ F ไปยังเซลล์ที่หก:

องค์ประกอบ-f ( grid-column-start: 5; grid-column-end: 6; grid-row-start: 3; grid-row-end: 4; )

องค์ประกอบ - ฉ ( ตาราง - คอลัมน์ - เริ่มต้น : 5 ; ตาราง - คอลัมน์ - สิ้นสุด : 6 ; ตาราง - แถว - เริ่มต้น : 3 ; ตาราง - แถว - สิ้นสุด : 4 ;

การสร้างเค้าโครงพื้นฐาน

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

< div class = "grid-container" > < div class = "grid-element header" >ส่วนหัว< / div > < div class = "grid-element sidebar" >แถบด้านข้าง< / div > < div class = "grid-element main" >เนื้อหาหลัก< / div > < div class = "grid-element extra" >ข้อมูลเพิ่มเติม< / div > < div class = "grid-element footer" >ส่วนท้าย< / div > < / div >

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

สิ่งที่เราต้องทำคือกำหนดค่าของคุณสมบัติเช่น grid-row-end สำหรับองค์ประกอบทั้งหมด เช่นเดียวกับในตัวอย่างก่อนหน้านี้ เราจะใช้แผนภาพกริดเพื่อกำหนดค่าคุณสมบัติ

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

ใครก็ตามที่เคยทำงานกับกริดจะรู้ว่ากริดคืออะไร บรรณาธิการกราฟิก (Photoshop, ดอกไม้ไฟ, Gimp ฯลฯ)และแน่นอนว่าชื่นชมความจำเป็นในการสร้างงานออกแบบใดๆ แต่จะใช้งาน Grid บนเว็บได้อย่างไร? โดยพื้นฐานแล้ว แบบตารางเลย์เอาต์เป็นการออกแบบหน้าเว็บจริงด้วย Grid ซึ่งสะดวกมากอย่างไม่ต้องสงสัย แต่ไม่ใช่ ตั้งใจใช้องค์ประกอบ โต๊ะน่ากลัวมาก
โชคดีที่ความนิยมอย่างมากของมาตรฐานเว็บได้เติบโตขึ้นและยังคงเติบโตอย่างต่อเนื่อง ปีที่ผ่านมาเช่นเดียวกับการสนับสนุนในเบราว์เซอร์สมัยใหม่ ทำให้เรามีโอกาสสร้างเพจอเนกประสงค์ที่มีมาร์กอัปเชิงลอจิคัลเพียงเล็กน้อย เค้าโครงนี้เรียกว่า ปิดกั้น- แต่ยัง ปิดกั้นเค้าโครงกลายเป็น ด้านที่อ่อนแอ- เมื่อสร้างเพจที่มีองค์ประกอบจำนวนมากที่มีขนาดและความหมายต่างกัน การมาร์กอัปหน้าดังกล่าวกลายเป็นงานที่ยากมาก และหากมีคนทำงานกับมาร์กอัปมากกว่าหนึ่งคน งานดังกล่าวอาจกลายเป็นฝันร้ายได้
จากนั้นเทคนิคการใช้กริดก็เข้ามาช่วยเหลือ เทคนิคนี้เป็นเทคนิคลูกผสมระหว่าง ปิดกั้นและ แบบตารางเค้าโครง การใช้มันทำให้เรา:

• ความเร็วและความสะดวกในการพัฒนา
• เสรีภาพในการวางตำแหน่ง
• สัดส่วนขององค์ประกอบของหน้าและตำแหน่ง

ราคาทั้งหมดนี้เป็นเพียงมาร์กอัปพิเศษเล็กน้อย ฉันคิดว่าทุกวันนี้ เมื่อราคานาฬิกาของคนๆ หนึ่งมีราคาแพงกว่าฮาร์ดแวร์และประสิทธิภาพการทำงานมาก ก็ไม่ยากที่จะเดาว่าตาชั่งจะเอียงไปทางไหน

เลย์เอาต์ของ Grid คืออะไร? ก่อนอื่นมันเป็นแนวคิด แนวคิดที่มีแง่มุมการออกแบบมากมายและมีกฎเกณฑ์น้อยมากสำหรับการนำไปปฏิบัติ สิ่งนี้ให้อิสระอย่างสมบูรณ์และไม่มีมาตรฐานในการดำเนินการ ฉันจะพูดมากกว่านี้ - กริดเดียวกันสามารถนำไปใช้ได้มากที่สุด ในรูปแบบที่แตกต่างกัน- หากคุณได้อ่านเกี่ยวกับกริดแล้ว คุณอาจสังเกตเห็นว่าผู้เขียนแต่ละคนเริ่มต้นด้วย ด้านใหม่การลงรายละเอียดมากเกินไปทำให้สับสนที่จะพูดน้อยที่สุด โชคดีที่พวกเขาเริ่มปรากฏตัวขึ้น ระบบกริด- ไลบรารี CSS สำหรับการทำงานกับ Grid และเมื่อใช้ตัวอย่างเหล่านี้ คุณจะเชี่ยวชาญได้อย่างรวดเร็ว หลักการพื้นฐานเทคนิคนี้

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

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

เรามาลองสร้างตารางที่มีความกว้าง 950 พิกเซลโดยมี 16 คอลัมน์โดยเว้นระยะห่าง 10 พิกเซล ดังนั้น 1 คอลัมน์ควรมีความกว้าง 50 พิกเซล เมื่อเข้าใจค่าทั้งหมดแล้ว เราจะเปิดโปรแกรมแก้ไขกราฟิกที่เรารู้จักและสร้างเค้าโครง คุณยังสามารถเพิ่มช่องว่างภายในตารางด้านซ้ายและขวาได้ โดยแต่ละพิกเซลมีขนาด 20 พิกเซล ซึ่งจะทำให้ได้เค้าโครงที่มีความกว้าง 990 พิกเซล คุณสามารถดูตัวอย่างของฉัน

ตอนนี้เราสามารถเริ่มสร้างห้องสมุดของเราได้แล้ว เช่นเดียวกับไลบรารี CSS ส่วนใหญ่ที่เราต้องการการรีเซ็ตทั่วโลก ฉันขอแนะนำให้รีเซ็ต CSS ของ Eric Mayer โดยคงไว้ รีเซ็ต.cssมาสร้างกันเถอะ grid.cssซึ่งเราสามารถเพิ่มวิธีการทำความสะอาดภาชนะที่มีบล็อกลอยได้ทันที - Clear Fix สิ่งแรกที่เราต้องการคือกฎสำหรับคอนเทนเนอร์ที่จะมีคอลัมน์ทั้งหมดของเรา ความกว้างของแต่ละคอนเทนเนอร์เท่ากับความกว้างของตารางของเรา

.คอนเทนเนอร์(
ระยะขอบ: 0 อัตโนมัติ;
ความกว้าง: 950px;
}

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

.คอลัมน์(
ลอย: ซ้าย;
ขอบขวา: 10px;
ล้น: ซ่อนเร้น;
ความกว้าง: 50px;
}

คอลัมน์สุดท้ายไม่จำเป็นต้องมีการเยื้อง เพื่อดำเนินการนี้ มาเพิ่มกฎกันด้วย:

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

.clearfix:หลัง .container:หลัง{
เนื้อหา: ".";
จอแสดงผล: บล็อก;
ความสูง: 0;
ชัดเจน: ทั้งสอง;
การมองเห็น: ซ่อนเร้น;
}

เคลียร์ฟิกซ์, .คอนเทนเนอร์(จอแสดงผล: อินไลน์บล็อก; )

/* ซ่อนจาก IE-mac \*/
*html.clearfix, *html.คอนเทนเนอร์(ส่วนสูง: 1%;)
.เคลียร์ฟิกซ์ .คอนเทนเนอร์(จอแสดงผล: บล็อก;)
/* สิ้นสุดการซ่อนจาก IE-mac */

ตอนนี้เราสามารถเริ่มต้นด้วยคอลัมน์ของเรา คอลัมน์สามารถมีความกว้างได้สองหรือสามคอลัมน์เป็นต้น ในการดำเนินการนี้ เราสามารถใช้กฎต่อไปนี้กับพวกเขาได้:

.span-1 ( กว้าง: 50px; )
.span-2 (กว้าง: 110px; )
.span-3 (กว้าง: 170px; )
.span-4 (กว้าง: 230px; )
.span-5 (กว้าง: 290px; )
.span-6 (กว้าง: 350px; )
.span-7 (กว้าง: 410px; )
.span-8 (กว้าง: 470px; )
.span-9 (กว้าง: 530px; )
.span-10 (กว้าง: 590px; )
.span-11 (กว้าง: 650px; )
.span-12 (กว้าง: 710px; )
.span-13 (กว้าง: 770px; )
.span-14 (กว้าง: 830px; )
.span-15 (กว้าง: 890px; )
.span-16 ( กว้าง: 950px; ขอบขวา: 0; )

โดยหลักการแล้ว นี่คือทั้งหมดที่จำเป็นสำหรับการใช้งาน Grid คุณยังสามารถเพิ่ม wrapper และคลาสสำหรับการดู Grid ด้วยเค้าโครงได้ มาสร้างกันเถอะ main.cssและเพิ่มเข้าไป:

.กระดาษห่อ(
ระยะขอบ: 0 อัตโนมัติ;
ความกว้าง: 990px;
}
.ซ้อนทับ(
พื้นหลัง: url โปร่งใส (overlay.png) เลื่อนซ้ำ y บนซ้าย;
}

เค้าโครงอาจมีลักษณะดังนี้:

ฉันคิดว่านี่เพียงพอแล้วสำหรับการเริ่มต้น
คุณสามารถดูตัวอย่างของฉัน

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

สื่อสอบถาม

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

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

เราจะเริ่มต้นด้วยการคัดลอกประกาศของกริดแรก มารวมรายการที่ซ้ำกันลงในคิวรีสื่อโดยใช้เทคนิคที่เน้นอุปกรณ์เคลื่อนที่เป็นอันดับแรก ฉันเอา 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: " ส่วนหัว" "หลัก" "แถบด้านข้าง" "ส่วนท้าย"; )

ตาราง - 1 ( จอแสดงผล: ตาราง; ความกว้าง: 100%; ระยะขอบ: 0 อัตโนมัติ; ตาราง - เทมเพลต - คอลัมน์ : 1fr ; ตาราง - เทมเพลต - แถว : 80px อัตโนมัติ อัตโนมัติ 80px ; ตาราง - ช่องว่าง : 10px ; ตาราง - เทมเพลต - พื้นที่ : "ส่วนหัว" "หลัก" "แถบด้านข้าง" "ส่วนท้าย" ;

เพื่อให้พอดีกับหน้าจอขนาดเล็ก เราตั้งค่า 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 เพิ่มเติม แบบฝึกหัดเชิงปฏิบัติ และวิธีแก้ไขปัญหากริดทั่วไป

กาลครั้งหนึ่งฉันเขียนถึงบริการที่ไม่ธรรมดาซึ่งก็คือ 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 ; )

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 ; )

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 ; )

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

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

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

.item1 ( ตาราง-คอลัมน์-เริ่มต้น : 1 ; ตาราง-คอลัมน์-end : 4 ; )

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

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

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

.item1 ( ตาราง-คอลัมน์ : 1 / 4 ; )

รายการที่ 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 ;

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)

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

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

.container ( แสดง : 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" "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 " ; )

คอนเทนเนอร์ ( จอแสดงผล: 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:

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

ส่วนหัว ( พื้นที่ตาราง: 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" ;

ตารางแม่แบบพื้นที่: "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!

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

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

เค้าโครงไซต์แบบคลาสสิก

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

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

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

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

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

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

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

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

บันทึกอีเมล

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

ใครก็ตามที่เคยร่วมงานกับนักแก้ไขกราฟิกจะรู้ดีว่ากริดคืออะไร (Photoshop, ดอกไม้ไฟ, Gimp ฯลฯ)และแน่นอนว่าชื่นชมความจำเป็นในการสร้างงานออกแบบใดๆ แต่จะใช้งาน Grid บนเว็บได้อย่างไร? โดยพื้นฐานแล้ว แบบตารางเลย์เอาต์เป็นการออกแบบหน้าเว็บจริงด้วย Grid ซึ่งสะดวกมากอย่างไม่ต้องสงสัย แต่ไม่ใช่การใช้องค์ประกอบตามเจตนา โต๊ะน่ากลัวมาก
โชคดีที่ความนิยมอย่างมากของมาตรฐานเว็บ ซึ่งเติบโตขึ้นและยังคงเติบโตอย่างต่อเนื่องในช่วงไม่กี่ปีที่ผ่านมา เช่นเดียวกับการสนับสนุนในเบราว์เซอร์สมัยใหม่ ทำให้เรามีโอกาสสร้างหน้าเว็บที่ใช้งานได้หลากหลายโดยใช้มาร์กอัปเชิงตรรกะเพียงเล็กน้อย เค้าโครงนี้เรียกว่า ปิดกั้น- แต่ยัง ปิดกั้นเค้าโครงกลายเป็นจุดอ่อน เมื่อสร้างเพจที่มีองค์ประกอบจำนวนมากที่มีขนาดและความหมายต่างกัน การมาร์กอัปหน้าดังกล่าวกลายเป็นงานที่ยากมาก และหากมีคนทำงานกับมาร์กอัปมากกว่าหนึ่งคน งานดังกล่าวอาจกลายเป็นฝันร้ายได้
จากนั้นเทคนิคการใช้กริดก็เข้ามาช่วยเหลือ เทคนิคนี้เป็นเทคนิคลูกผสมระหว่าง ปิดกั้นและ แบบตารางเค้าโครง การใช้มันทำให้เรา:

• ความเร็วและความสะดวกในการพัฒนา
• เสรีภาพในการวางตำแหน่ง
• สัดส่วนขององค์ประกอบของหน้าและตำแหน่ง

ราคาทั้งหมดนี้เป็นเพียงมาร์กอัปพิเศษเล็กน้อย ฉันคิดว่าทุกวันนี้ เมื่อราคานาฬิกาของคนๆ หนึ่งมีราคาแพงกว่าฮาร์ดแวร์และประสิทธิภาพการทำงานมาก ก็ไม่ยากที่จะเดาว่าตาชั่งจะเอียงไปทางไหน

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

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

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

เรามาลองสร้างตารางที่มีความกว้าง 950 พิกเซลโดยมี 16 คอลัมน์โดยเว้นระยะห่าง 10 พิกเซล ดังนั้น 1 คอลัมน์ควรมีความกว้าง 50 พิกเซล เมื่อเข้าใจค่าทั้งหมดแล้ว เราจะเปิดโปรแกรมแก้ไขกราฟิกที่เรารู้จักและสร้างเค้าโครง คุณยังสามารถเพิ่มช่องว่างภายในตารางด้านซ้ายและขวาได้ โดยแต่ละพิกเซลมีขนาด 20 พิกเซล ซึ่งจะทำให้ได้เค้าโครงที่มีความกว้าง 990 พิกเซล คุณสามารถดูตัวอย่างของฉัน

ตอนนี้เราสามารถเริ่มสร้างห้องสมุดของเราได้แล้ว เช่นเดียวกับไลบรารี CSS ส่วนใหญ่ที่เราต้องการการรีเซ็ตทั่วโลก ฉันขอแนะนำให้รีเซ็ต CSS ของ Eric Mayer โดยคงไว้ รีเซ็ต.cssมาสร้างกันเถอะ grid.cssซึ่งเราสามารถเพิ่มวิธีการทำความสะอาดภาชนะที่มีบล็อกลอยได้ทันที - Clear Fix สิ่งแรกที่เราต้องการคือกฎสำหรับคอนเทนเนอร์ที่จะมีคอลัมน์ทั้งหมดของเรา ความกว้างของแต่ละคอนเทนเนอร์เท่ากับความกว้างของตารางของเรา

.คอนเทนเนอร์(
ระยะขอบ: 0 อัตโนมัติ;
ความกว้าง: 950px;
}

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

.คอลัมน์(
ลอย: ซ้าย;
ขอบขวา: 10px;
ล้น: ซ่อนเร้น;
ความกว้าง: 50px;
}

คอลัมน์สุดท้ายไม่จำเป็นต้องมีการเยื้อง เพื่อดำเนินการนี้ มาเพิ่มกฎกันด้วย:

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

.clearfix:หลัง .container:หลัง{
เนื้อหา: ".";
จอแสดงผล: บล็อก;
ความสูง: 0;
ชัดเจน: ทั้งสอง;
การมองเห็น: ซ่อนเร้น;
}

เคลียร์ฟิกซ์, .คอนเทนเนอร์(จอแสดงผล: อินไลน์บล็อก; )

/* ซ่อนจาก IE-mac \*/
*html.clearfix, *html.คอนเทนเนอร์(ส่วนสูง: 1%;)
.เคลียร์ฟิกซ์ .คอนเทนเนอร์(จอแสดงผล: บล็อก;)
/* สิ้นสุดการซ่อนจาก IE-mac */

ตอนนี้เราสามารถเริ่มต้นด้วยคอลัมน์ของเรา คอลัมน์สามารถมีความกว้างได้สองหรือสามคอลัมน์เป็นต้น ในการดำเนินการนี้ เราสามารถใช้กฎต่อไปนี้กับพวกเขาได้:

.span-1 ( กว้าง: 50px; )
.span-2 (กว้าง: 110px; )
.span-3 (กว้าง: 170px; )
.span-4 (กว้าง: 230px; )
.span-5 (กว้าง: 290px; )
.span-6 (กว้าง: 350px; )
.span-7 (กว้าง: 410px; )
.span-8 (กว้าง: 470px; )
.span-9 (กว้าง: 530px; )
.span-10 (กว้าง: 590px; )
.span-11 (กว้าง: 650px; )
.span-12 (กว้าง: 710px; )
.span-13 (กว้าง: 770px; )
.span-14 (กว้าง: 830px; )
.span-15 (กว้าง: 890px; )
.span-16 ( กว้าง: 950px; ขอบขวา: 0; )

โดยหลักการแล้ว นี่คือทั้งหมดที่จำเป็นสำหรับการใช้งาน Grid คุณยังสามารถเพิ่ม wrapper และคลาสสำหรับการดู Grid ด้วยเค้าโครงได้ มาสร้างกันเถอะ main.cssและเพิ่มเข้าไป:

.กระดาษห่อ(
ระยะขอบ: 0 อัตโนมัติ;
ความกว้าง: 990px;
}
.ซ้อนทับ(
พื้นหลัง: url โปร่งใส (overlay.png) เลื่อนซ้ำ y บนซ้าย;
}

เค้าโครงอาจมีลักษณะดังนี้:

ฉันคิดว่านี่เพียงพอแล้วสำหรับการเริ่มต้น
คุณสามารถดูตัวอย่างของฉัน