พื้นฐานของ CSS Grid

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

จริงๆ แล้วกริดคืออะไร

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

คำศัพท์พื้นฐานในตาราง:

1. เส้นตาราง:

เหล่านี้คือเส้นที่ประกอบกันเป็นตาราง

<แข็งแกร่ง>2. กริดเซลล์:

เซลล์ตารางเป็นหน่วยเดียวของตาราง CSS

<แข็งแกร่ง>3. พื้นที่ตาราง:

พื้นที่ตารางคือพื้นที่ใดๆ ในตารางที่อยู่ระหว่างเส้นตารางสี่เส้น

<แข็งแกร่ง>4. เส้นตาราง:

แทร็กกริดคือช่องว่างระหว่างเส้นกริดสองเส้น เส้นสามารถเป็นได้ทั้งแนวตั้งหรือแนวนอน

<แข็งแกร่ง>5. รางน้ำ:

Gutter หมายถึงช่องว่างระหว่างแถวและคอลัมน์ในตาราง

สร้างกริดแรกของเรา:

ขั้นตอนที่ 1: สร้างคอนเทนเนอร์กริด สำหรับสิ่งนี้ให้สร้าง div และเขียนภายใน CSS

จอแสดงผล: ตาราง

ตอนนี้การแสดงคอนเทนเนอร์ของเราถูกตั้งค่าเป็นตาราง

ขั้นตอนที่ 2: กำหนดแถวและคอลัมน์ของตาราง แม้ว่าจะมีวิธีการต่างๆ มากมายในการกำหนดสิ่งนี้ แต่เราจะยึดวิธีการพื้นฐานไว้ที่นี่

grid-template-columns: 150px 150px 150px;
grid-template-rows: 150px 150px;

สิ่งที่โค้ดด้านบนทำคือกำหนด 3 คอลัมน์และ 2 แถวแต่ละคอลัมน์ โดยแต่ละคอลัมน์มีขนาด 150px

ตอนนี้ขอเพิ่มรางน้ำลงไปบ้าง

grid-gap: 1rem;

ด้านบนเพิ่มช่องว่าง 1rem ระหว่างแถวและคอลัมน์ของตาราง

ตอนนี้เราไปที่คอนเทนเนอร์ HTML ของเราและเพิ่มหก div เข้าไปข้างใน

นี่คือลักษณะของโค้ด:

<div class="container">
  <div class="item item1"></div>
  <div class="item item2"></div>
  <div class="item item3"></div>
  <div class="item item4"></div>
  <div class="item item5"></div>
  <div class="item item6"></div>
</div>

ตอนนี้เรามาเพิ่มส่วน CSS:

.container {
  display: grid;
  grid-template-columns: 150px 150px 150px;
  grid-template-rows: 150px 150px;
  grid-gap: 1rem;
}

ผลลัพธ์สุดท้ายจะมีลักษณะดังนี้:

ตอนนี้เราได้สร้างกริดแรกของเราแล้ว เรามาดูหน่วยบางส่วนที่เราใช้ในกริดกันดีกว่า

หน่วย Fr:

ก่อนหน้านี้เราใช้ px เป็นหน่วยสำหรับกริดของเรา แต่นั่นไม่ได้มีประสิทธิภาพในการใช้งานมากนัก นั่นคือที่มาของหน่วย Fr Fr ย่อมาจากเศษส่วน ความหมายคือเศษส่วนของพื้นที่ที่มีอยู่ในตารางของเรา

ตอนนี้เราสร้างตารางโดยใช้หน่วย Fr:

grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 150px 150px;

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

grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 150px 150px;

สัญลักษณ์ซ้ำ():

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

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

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

การวางตำแหน่งในตาราง:

พิจารณาตารางด้านบน มี 3 คอลัมน์ 2 แถว ตัวเลขเหล่านี้เรียกว่า "เส้นตาราง" ดังนั้นหากตารางมี 2 คอลัมน์ ก็จะมีเส้นตาราง 3 เส้น

ที่นี่ตารางมี 3 คอลัมน์ ดังนั้นจึงมีเส้นตาราง 4 เส้นตามคอลัมน์

มี 2 ​​แถว จึงมีเส้นตาราง 3 เส้นตามแถว

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

ตอนนี้เรามากำหนดคอนเทนเนอร์ใน HTML ที่มีหก div อยู่ในนั้น:

<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
</div>

สมมติว่าเราต้องการให้ item1 ครอบครอง 2 คอลัมน์แรกและแถวแรกของตารางของเรา เพื่อที่เราจะใช้รหัส CSS ต่อไปนี้:

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

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

คุณสมบัติชวเลข:

นอกจากนี้เรายังสามารถเขียนโค้ด CSS ข้างต้นโดยใช้สัญลักษณ์ชวเลขที่ระบุด้านล่าง:

.item1 {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}

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

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

ตัวอย่างเช่น นี่คือโครงร่างพื้นฐาน:

เริ่มต้นด้วยการเขียนโค้ด HTML พื้นฐาน:

<div class="container">
  <div class="header">header</div>
  <div class="sidebar">sidebar</div>
  <div class="content-1">Content-1</div>
  <div class="content-2">Content-2</div>
  <div class="content-3">Content-3</div>
  <div class="footer">footer</div>
</div>

ที่นี่เราได้กำหนดคลาส "คอนเทนเนอร์" โดยมีหกส่วนอยู่ข้างใน

ตอนนี้เรามากำหนดโค้ด CSS ของตารางกัน:

.container {
  display: grid;
  width: 750px;
  height: 600px;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: 80px 1fr 1fr 100px;
  grid-gap: 1rem;
}

ตอนนี้เรามาวางส่วนของคอนเทนเนอร์ในพื้นที่กริด:

.header {
  grid-row: 1 / 2;
  grid-column: 1 / 4;
}

.sidebar {
  grid-row: 2 / 4;
  grid-column: 1 / 2;
}

.content-1 {
  grid-row: 2 / 3;
  grid-column: 2 / 4;
}

.content-2 {
  grid-row: 3 / 4;
  grid-column: 2 / 3;
}

.content-3 {
  grid-row: 3 / 4;
  grid-column: 3 / 4;
}

.footer {
  grid-row: 4 / 5;
  grid-column: 1 / 4;
}

การเปิดโค้ดนี้บนเบราว์เซอร์จะทำให้เราได้เค้าโครงด้านบน

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

ตอนนี้เราได้เห็นวิธีการวางรายการต่างๆ ในตารางโดยใช้เส้นตารางแล้ว มาดูวิธีอื่นกัน:

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

.container {
  display: grid;
  width: 100%;
  height: 600px;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: 80px 1fr 1fr 100px;
  grid-gap: 1rem;
  grid-template-areas:
      "header header header"
      "sidebar content-1 content-1"
      "sidebar content-2 content-3"
      "footer footer footer";
}

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

ตอนนี้เรามาเพิ่มพื้นที่เหล่านี้ลงในโค้ด HTML ของเราเพื่อระบุพื้นที่เทมเพลตกริด:

<div class="container">
  <div class="header">header</div>
  <div class="sidebar">sidebar</div>
  <div class="content-1">Content-1</div>
  <div class="content-2">Content-2</div>
  <div class="content-3">Content-3</div>
  <div class="footer">footer</div>
</div>

ตอนนี้เพิ่ม CSS ที่เหลือ:

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content-1 {
  grid-area: content-1;
}

.content-2 {
  grid-area: content-2;
}

.content-3 {
  grid-area: content-3;
}

.footer {
  grid-area: footer;
}

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

นี่เป็นเพียงพื้นฐานของกริด มีอะไรอีกมากมายที่เราสามารถทำได้

ขอบคุณที่อ่าน.