คำแนะนำเกี่ยวกับ CSS Grid: การเรียนรู้เลย์เอาต์ด้วยคุณสมบัติกริด

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

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

ตารางคอนเทนเนอร์และรายการต่างๆ

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

นี่คือวิธีการนำเสนอ:

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

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

นี่คือสิ่งที่ดูเหมือน:

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

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

เส้นกริดและแทร็ก

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

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

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

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

คุณสมบัติคอนเทนเนอร์กริด CSS

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

เทมเพลตกริด

คุณสมบัติปัจจุบันควบคุมขนาดของแถวและคอลัมน์ ซึ่งอาจกำหนดเป็นพิกเซล เปอร์เซ็นต์ หรือเศษส่วน นอกจากนี้ ยังมีคำสำคัญต่างๆ เช่น"auto",“minmax”,“repeat"เพื่อเพิ่มความคล่องตัว

⭐grid-template-rows: ตั้งค่าความสูงของแถว

⭐grid-template-columns: กำหนดความกว้างของคอลัมน์

นี่คือตัวอย่างบางส่วน:

การใช้พิกเซล:

 .grid-container {
  display: grid;
  grid-template-columns: 250px 250px 250px;
  grid-template-rows: 250px 250px;
} 

ใช้เปอร์เซ็นต์:

 .grid-container {
  grid-template-columns: 25% 50% 25%;
  grid-template-rows: 50% 50%;
} 

ใช้เ:

 .grid-container {
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1fr 2fr;
}

การใช้คำสำคัญ auto และ minmax():

 .grid-container {
  grid-template-columns: auto minmax(150px, 1fr) auto;
  grid-template-rows: 100px auto;
}

การใช้ Repeat() เพื่อการปรับขนาดที่สอดคล้องกัน:

 .grid-container {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 150px);
}

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

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

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

 .grid-container {
  grid-template-areas:'header header header header'
    'sidebar main main right'
    'sidebar content content right'
    'footer footer footer footer';
}

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

การจัดแนวใน CSS Grid

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

⭐ justify-items: ควบคุมการจัดแนวแนวนอนของรายการภายในเซลล์กริด

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

⭐ align-items: ควบคุมการจัดตำแหน่งแนวตั้งของรายการภายในเซลล์กริด

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

⭐ justify-content: จัดแนวตารางทั้งหมดภายในคอนเทนเนอร์ตามแนวแกนนอน

ค่าที่สามารถใช้เพื่อตั้งค่าระยะห่างระหว่างอินสแตนซ์ของคลัสเตอร์ตัวทำเครื่องหมาย ได้แก่ “เริ่มต้น”, “สิ้นสุด”, “ศูนย์กลาง”, “ยืดออก”, “ช่องว่างระหว่าง”, “ช่องว่างรอบ” และ “ช่องว่างเท่ากัน”.

⭐ align-content: จัดแนวตารางทั้งหมดภายในคอนเทนเนอร์ตามแกนตั้ง

ค่าที่ใช้ได้สำหรับควบคุมระยะห่างของรายการในคอนเทนเนอร์ Flex ได้แก่"เริ่มต้น"“สิ้นสุด"“กึ่งกลาง"“ยืด"“ช่องว่างระหว่าง"“ช่องว่างรอบ"และ"ช่องว่างเท่ากัน”

นี่คือตัวอย่าง:

 .grid-container {
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  align-items: center;
  justify-content: space-between;
  align-content: center;
} 

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

ช่องว่างกริด

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

คุณสมบัติ grid-gap อนุญาตให้กำหนดระยะห่างระหว่างองค์ประกอบตารางตามแกนแถวและแกนคอลัมน์ โดยใช้ช่วงของหน่วยรวมถึงพิกเซล (px) เปอร์เซ็นต์ (%) และหน่วย em (em)

 .grid-container {
  grid-gap: 20px;
} 

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

คุณสมบัติรายการตาราง CSS

แน่นอน! การนำเสนอสรุปคุณลักษณะที่สำคัญหลายประการที่ควบคุมการดำเนินการของแต่ละรายการภายในการจัดเรียง CSS Grid พร้อมด้วยตัวอย่างประกอบ:

ตารางแถวเริ่มต้นและตารางแถวสิ้นสุด:

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

ค่าของช่วงสามารถรวมหมายเลขบรรทัดได้ เช่น"span n"หรืออาจตั้งค่าให้ปรับโดยอัตโนมัติตามขนาดของหน้าจอโดยใช้การตั้งค่า"อัตโนมัติ”

 .grid-item-1 {
  grid-row-start: 2;
  grid-row-end: 4;
}

รหัสที่กำหนดจะวางตำแหน่งรายการกริด 1 ภายในช่วงแถว โดยขยายจากการจัดตำแหน่งแนวตั้งของแถวที่สองไปยังตำแหน่งที่สอดคล้องกันของแถวที่สี่

ตาราง-คอลัมน์-เริ่มต้น และตาราง-คอลัมน์-สิ้นสุด:

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

ค่าอาจอยู่ในรูปแบบต่างๆ เช่น หมายเลขบรรทัด “span n” หรือ “auto”

 .grid-item-2 {
  grid-column-start: 1;
  grid-column-end: 3;
}

รหัสที่กำหนดวางตำแหน่งรายการกริด 2 ในลักษณะที่ครอบคลุมสามคอลัมน์ โดยเริ่มจากบรรทัดเริ่มต้นของคอลัมน์แรกและสิ้นสุดที่บรรทัดสุดท้ายของคอลัมน์ที่สอง

ตารางพื้นที่:

คุณสมบัติ CSS grid-template-areas ช่วยให้สามารถระบุขนาดและตำแหน่งขององค์ประกอบภายในคอนเทนเนอร์กริดโดยอ้างอิงถึงเส้นกริดเฉพาะผ่านชื่อที่เกี่ยวข้อง

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

 .header {
  grid-area: header;
}
.sidebar {
  grid-area: sidebar;
}
.main {
  grid-area: main;
}
.content {
  grid-area: content;
}
.right {
  grid-area: right;
}
.footer {
  grid-area: footer;
} 

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

ปรับตัวเอง:

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

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

 .grid-item-5 {
  justify-self: center;
}

รหัสที่กำหนดจะจัดแนวรายการกริดที่ห้า รายการกริด 5 ในแนวนอนที่กึ่งกลางของเซลล์ตามลำดับภายในโครงร่างกริด

จัดตำแหน่งตนเอง:

แก้ไขการจัดตำแหน่งของแต่ละรายการในคอลัมน์เพื่อให้วางในแนวตั้งภายในเซลล์ที่เกี่ยวข้อง

ค่าสามารถมีรูปแบบต่างๆ ได้ เช่น เป็นจุดเริ่มต้น จุดสิ้นสุด การอ้างอิงส่วนกลาง หรือวิธีการขยายเกินช่วงปกติ

 .grid-item-1 {
  align-self: end;
}

โค้ดชิ้นนี้จะวางแนวและวางตำแหน่ง “รายการกริด 1” เพื่อให้วางอยู่ที่จุดต่ำสุดภายในเซลล์กริดที่เกี่ยวข้อง

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

การสร้างเค้าโครงที่ตอบสนองโดยใช้ CSS Grids

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

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

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

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

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

สำรวจความเป็นไปได้ของเค้าโครงตาราง CSS

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

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