สร้างตารางตอบสนองที่สมบูรณ์แบบด้วย CSS

การรู้วิธีสร้างกริดแบบตอบสนองเป็นส่วนสำคัญของการพัฒนาเว็บ

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

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

มาดูภาพรวมคร่าวๆ ว่ากริดคืออะไร:

เลย์เอาต์กริดคืออะไร

ตารางเป็นวิธีการจัดระเบียบองค์ประกอบภาพในสื่อที่ได้รับการพิสูจน์แล้ว

นักออกแบบได้ใช้กริดตั้งแต่วันแรกของการพิมพ์หนังสือพิมพ์และโฆษณา

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

การออกแบบตารางจะแบ่งพื้นที่ออกเป็นคอลัมน์ ระหว่างคอลัมน์เป็นช่องว่างหรือรางน้ำ

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

คุณสามารถดูแนวทางปฏิบัตินี้ในธีมเว็บไซต์ Studiopress:

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

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

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

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

อ่านต่อและค้นหา:

วิธีการสร้างตารางตอบสนอง

เมื่อเร็ว ๆ นี้มีการพูดคุยกันมากมายเกี่ยวกับการจัดวางกริด flexbox และ CSS

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

(และก่อนที่จะมีกริดแบบลอย ตาราง HTML เป็นเพียงตัวเลือกเดียว แต่เราไม่ได้พูดถึงสิ่งเหล่านั้น 😉 )

เมื่อฉันเรียนรู้การพัฒนาเว็บส่วนหน้า ฉันเริ่มใช้เฟรมเวิร์กที่ตอบสนอง นั่นคือ Zurb Foundation หลายท่านอาจใช้ Bootstrap.

กรอบงานที่ตอบสนองทำให้การสร้างเว็บไซต์ง่ายขึ้นมาก ประหยัดเวลาได้มาก!

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

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

สิ่งสำคัญ:มันจะทำให้คุณเป็นนักพัฒนาเว็บที่ดียิ่งขึ้น

มินิโปรเจ็กต์ของเรา

เราจะเจาะลึกถึงวิธีสร้างตาราง 2 คอลัมน์อย่างง่าย โดยใช้สามวิธีที่แตกต่างกัน:

• ลอย
• เฟล็กซ์บ็อกซ์
• และเค้าโครงกริด CSS

ฉันจะอธิบายแต่ละขั้นตอนโดยใช้ข้อมูลโค้ดและกราฟิก

การวางแผนตาราง

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

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

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

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

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

บนเดสก์ท็อป เราต้องการให้คอลัมน์เนื้อหาหลักมีความกว้าง 2/3 และแถบด้านข้างให้มีความกว้าง 1/3

และนี่คือสิ่งที่เราต้องการให้กริดดูเหมือนกับเบรกพอยต์แต่ละจุด:

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

ตอนนี้เรามีข้อมูลพื้นฐานที่จำเป็นในการเริ่มสร้างตารางของเราแล้ว!

ตารางลอย

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

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

สร้างตารางด้วยทุ่น

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

.column {
   display: block;
   float: left;
}

ดูเหมือนตรงไปตรงมาใช่ไหม

อย่างไรก็ตาม แง่มุมที่น่ารำคาญอย่างหนึ่งเกี่ยวกับ float คือการนำองค์ประกอบออกจากโฟลว์ปกติของเอกสาร

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

คุณสามารถแก้ไขปัญหานี้ได้สองวิธี

คุณสามารถเพิ่ม display: table กำหนดกฎให้กับองค์ประกอบหลัก หรือคุณสามารถล้าง floats โดยเพิ่ม :after องค์ประกอบหลอกไปยังพาเรนต์ด้วยสไตล์ต่อไปนี้เพื่อล้างทุ่น

.parent:after
{
   clear: both;
   content: "";
   display: block;
}

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

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

*, *:after, *:before {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

Chris Coyier มีคำอธิบายที่ยอดเยี่ยมจริงๆ เกี่ยวกับเรื่องทั้งหมดนี้

การใช้คิวรีสื่อเพื่อทำให้กริดตอบสนอง

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

จากหมายเหตุของเรา เราต้องการให้ทั้งองค์ประกอบหลักและแถบด้านข้างมีความกว้าง 100% สำหรับอุปกรณ์เคลื่อนที่ จากนั้นให้วางเคียงข้างกัน 50% บนแท็บเล็ต และ 2/3 และ 1/3 และกว้าง 1/3 บนเดสก์ท็อป

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

<div class="parent">
   <div class="column main"></div>
   <div class="column sidebar"></div>
</div>

บนมือถือ:

ใน CSS โดยใช้วิธีการเพื่อมือถือเป็นอันดับแรก โดยค่าเริ่มต้น เราจะตั้งค่าทั้งสองคอลัมน์เป็น 100%

.column {
   display: block;
   width: 100%;
}

บนแท็บเล็ต:

จากนั้นสำหรับความกว้างสำหรับแท็บเล็ตขึ้นไป เราจะลอยคอลัมน์ไปทางซ้ายและทำให้มีความกว้าง 50%

@media only screen and (min-width: 641px){
   .column {
     width: 50%;
     float: left;
   }
}

บนเดสก์ท็อป:

สำหรับเดสก์ท็อป เราจะเพิ่มการสืบค้นสื่ออื่นเพื่อเปลี่ยนความกว้างของเนื้อหาหลักและแถบด้านข้างเป็น 2/3 และ 1/3

@media only screen and (min-width: 1025px){
   .main {
      width: 66.66%;
   }
   .sidebar {
      width: 33.33%;
   }
}

คุณสามารถตรวจสอบรหัสที่ใช้งานจริงบน codepen ของฉันได้ที่นี่:

ดู Pen Float Grid โดย Jessica (@thecodercoder) บน CodePen

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

แต่เมื่อเราเปลี่ยนไปใช้ flexbox ฉันคิดว่าคุณจะเห็นว่า float grid นั้นค่อนข้างแฮ็กเล็กน้อย และ flexbox นั้นใช้งานง่ายกว่า

ตาราง Flexbox

ในการสร้างตารางตอบสนองโดยใช้ flexbox เราจะใช้ HTML เดียวกันกับด้านบน โดยมี div หลักที่มี div คอลัมน์ย่อยสองคอลัมน์

สิ่งแรกที่คุณต้องทำคือประกาศว่าผู้ปกครองควรใช้ flexbox:

.parent {
   display: flex;
}

จากนั้นตั้งค่าคุณสมบัติ flex บน divs ของคอลัมน์:

.column {
   flex: 1;
}

flex: 1 การประกาศหมายความว่า div แต่ละคอลัมน์จะมีความกว้างเท่ากันกับคอลัมน์อื่นๆ มันเหมือนกับอัตราส่วน

หากคุณต้องการให้คอลัมน์แรกมีความกว้างเป็นสองเท่าของอีกคอลัมน์หนึ่ง คุณจะต้องตั้งค่า flex ของคอลัมน์แรกเป็น 2 และค่า flex ของคอลัมน์ที่สองจะเป็นครึ่งหนึ่งของค่านั้น 1

นั่นคือทั้งหมดที่คุณต้องเริ่มต้น!

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

เปรียบเทียบ CSS ด้านบนกับสิ่งที่เราต้องใช้สำหรับ float grid และฉันคิดว่าคุณจะเห็นด้วยกับฉันว่า flexbox นั้นง่ายกว่า

การทำกริดแบบยืดหยุ่น

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

สำหรับมือถือ:

เราไม่ต้องการ flexbox บนมือถือ เฉพาะบนแท็บเล็ตและเดสก์ท็อปเท่านั้น ดังนั้น div parent จึงไม่จำเป็นต้องมี display: flex ประกาศเลย

เราต้องการให้ div ของคอลัมน์มีความกว้าง 100% คุณสามารถกำหนดความกว้างได้อย่างชัดเจน:การประกาศในคอลัมน์ 100% หากต้องการ

หรือคุณไม่สามารถประกาศรูปแบบความกว้างได้ โดยทั่วไป div จะมีค่าเริ่มต้นเป็น display: block และความกว้างอัตโนมัติ 100%

สำหรับแท็บเล็ต:

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

ขั้นแรก เราจะสร้าง flexbox และตั้งค่าพาเรนต์ให้ใช้ display: flex .

เราต้องการให้คอลัมน์มีระยะห่างเท่ากันที่ความกว้างนี้ ดังนั้นเราจะใช้ flex: 1 ประกาศสำหรับคอลัมน์ div ทั้งหมด 1 หมายความว่าคอลัมน์จะมีความกว้างเท่ากันเมื่อเทียบกับคอลัมน์อื่น

@media only screen and (min-width: 641px){
   .parent {
   display: flex;
}
.column {
   flex: 1;
   }
}

สำหรับเดสก์ท็อป:

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

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

@media only screen and (min-width: 1025px){
   .main {
      flex: 2;
   }
}

ซึ่งหมายความว่าเนื้อหาหลักจะมีความกว้างเป็นสองเท่าของแถบด้านข้าง

เนื่องจากมีสองคอลัมน์ เนื้อหาหลักจึงจะมีความกว้าง 2/3 และแถบด้านข้างจะมีความกว้างเพียงครึ่งหนึ่งเท่ากับ 1/3

Flexbox ทรงพลังและใช้งานง่าย

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

สิ่งที่ฉันชอบเกี่ยวกับ flexbox คือมันใช้งานได้ . ใช้งานง่าย

หลังจากต่อสู้กับ CSS float มาหลายปี ฉันไม่อยากจะเชื่อเลยว่ามันง่ายแค่ไหนที่จะสร้างกริด

Flexbox ยังมีคุณสมบัติขั้นสูงเพิ่มเติมที่คุณสามารถใช้ประโยชน์ได้:

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

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

และนี่คือรหัสสำหรับกริดแบบยืดหยุ่น:

ดู Pen Flex Grid โดย Jessica (@thecodercoder) บน CodePen

คุณจะไม่ต้องใช้โฟลตอีกต่อไป แน่นอน เว้นแต่คุณจะตัดข้อความรอบรูปภาพ

พร้อมสำหรับความสนุกสนานมากขึ้นบ้างไหม? มาดูวิธีกริดสุดท้ายกัน:

เค้าโครงกริด CSS

กริด CSS เป็นวิธีการใหม่ล่าสุดสำหรับการสร้างกริด คล้ายกับแต่แตกต่างจาก flexbox มาก

ราเชล แอนดรูว์ ผู้เชี่ยวชาญด้าน CSS grid ต่างก็มีจุดแข็ง:

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

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

ในปัจจุบัน ข้อเสียเปรียบหลักของกริด CSS คือเบราว์เซอร์ทั้งหมดไม่รองรับในระดับสากล

Chrome เวอร์ชันเก่า iOS Safari และ Android ไม่รองรับเลย และการรองรับ IE และ Edge นั้นไม่แน่นอน

หากคุณต้องการใช้กริด CSS คุณมีสองตัวเลือก:

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

วิธีการทำงานของกริด CSS

เช่นเดียวกับ flexbox กริด CSS ต้องการให้คุณตั้งค่าคุณสมบัติการแสดงผลบนองค์ประกอบหลัก ในกรณีนี้ เราจะประกาศ display: grid .

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

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

เพื่อให้บรรลุสิ่งนี้ ให้ใช้ grid-template-columns คุณสมบัติหากคุณมีหลายคอลัมน์และ grid-template-rows สำหรับหลายแถว

จากนั้นคุณสมบัติจะตามด้วยค่าความยาวสำหรับองค์ประกอบย่อยแต่ละรายการ

สำหรับตารางที่มีสองคอลัมน์ เราจะใช้ grid-template-columns ทรัพย์สิน

grid-template-columns พร็อพเพอร์ตี้จะมีสองค่า ค่าหนึ่งสำหรับแต่ละคอลัมน์:

.parent {
   display: grid;
   grid-template-columns: 1fr 1fr;
}

คำว่า “fr” คืออะไร!

“fr” ย่อมาจาก เศษส่วน เป็นหน่วยวัดใหม่ มันหมายถึงอะไร เศษส่วน ของพื้นที่ว่างจะถูกใช้โดยแต่ละรายการในตาราง

จริงๆ แล้วคล้ายกับ flex number– ทั้งสองแสดงถึงความกว้างสัมพัทธ์ขององค์ประกอบลูกหนึ่งไปยังอีกองค์ประกอบหนึ่ง

สร้างตาราง CSS

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

บนมือถือ:

ตามปกติ คอลัมน์ย่อยจะสแต็คบนมือถือ ดังนั้นเราจะไม่ตั้งค่าสไตล์กริด CSS ใดๆ

บนแท็บเล็ต:

เราต้องการองค์ประกอบลูกสององค์ประกอบที่มีความกว้างเท่ากันสำหรับแท็บเล็ต

.parent {
   display: grid;
   grid-template-columns: 1fr 1fr;
}

บนเดสก์ท็อป:

เราจะใช้อัตราส่วนที่คล้ายกันของคอลัมน์หลักที่มีความกว้างเป็นสองเท่าของคอลัมน์แถบด้านข้าง ซึ่งจะคำนวณเป็น 2/3 และ 1/3 อีกครั้ง

@media only screen and (min-width: 1025px){
   .parent {
      grid-template-columns: 2fr 1fr;
   }
}

เยี่ยมมากที่เราไม่ต้องตั้งค่าสไตล์กริดบนคอลัมน์จริง แค่พาเรนต์!

กริด CSS ทรงพลังอย่างเหลือเชื่อ

เช่นเดียวกับ flexbox กริด CSS สามารถทำได้มากกว่าแค่การสร้างกริดสองคอลัมน์

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

หากคุณสนใจที่จะอ่านเพิ่มเติมเกี่ยวกับ CSS grid โปรดดูเว็บไซต์ Grid by Example ของ Rachel Andrew หรือบทความ Mozilla "แนวคิดพื้นฐานของการจัดวางกริด"

และนี่คือโค้ดโค้ดที่ฉันทำขึ้นสำหรับอันนี้:

ดูตาราง Pen CSS โดย Jessica (@thecodercoder) บน CodePen

กำลังปิด

หากคุณยังสงสัยว่าวิธีใดดีที่สุดสำหรับคุณ ฉันคิดว่า flexbox เป็นตัวเลือกที่ดีที่สุดในตอนนี้

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

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

คุณมีรายการโปรดหรือไม่? คุณเคยพยายามเรียนรู้ flexbox หรือ CSS grid หรือไม่? โปรดแสดงความคิดเห็นด้านล่าง