การใช้ Grid Named Areas เพื่อแสดงภาพ (และอ้างอิง) เค้าโครงของคุณ

เมื่อใดก็ตามที่เราสร้างเลย์เอาต์ที่เรียบง่ายหรือซับซ้อนโดยใช้ CSS Grid เรามักจะวางตำแหน่งรายการด้วยหมายเลขบรรทัด เลย์เอาต์กริดประกอบด้วยเส้นกริดที่จัดทำดัชนีโดยอัตโนมัติด้วยหมายเลขบรรทัดบวกและลบ (นั่นคือเว้นแต่เรา ตั้งชื่อให้ชัดเจน). การวางตำแหน่งรายการด้วยหมายเลขบรรทัดเป็นวิธีที่ดีในการจัดวางสิ่งต่าง ๆ แม้ว่า CSS Grid มีวิธีมากมายในการทำให้สำเร็จเช่นเดียวกันกับภาระผูกพันด้านความรู้ความเข้าใจที่ไม่ธรรมดา วิธีหนึ่งเหล่านี้คือสิ่งที่ฉันชอบคิดว่าเป็นวิธี “ASCII”

สรุปวิธี ASCII

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

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

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

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, 200px);
}

ตัวอย่างเล็ก ๆ ของ CSS นี้สร้างตาราง 3 × 2 โดยที่รายการกริดใช้พื้นที่เท่ากันในคอลัมน์ และโดยที่ตารางประกอบด้วยสามแถวที่มีขนาดแทร็กของ 200px.

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

grid-template-areas = none | <string>+

<string>+ กำลังแสดงรายการกลุ่มของสตริงที่ล้อมรอบด้วยใบเสนอราคา แต่ละสตริงจะแสดงเป็นเซลล์ และแต่ละสตริงที่ยกมาจะแสดงเป็นแถว แบบนี้:

grid-template-areas: "head head" "nav main" "foot foot";

คุณค่าของ grid-template-areas อธิบายเลย์เอาต์ว่ามีพื้นที่กริดสี่ส่วน พวกเขาคือ,

• head
• nav
• main
• foot

head และ foot ขยายแทร็กสองคอลัมน์และแทร็กหนึ่งแถว ที่เหลือ nav และ main แต่ละช่วงมีแทร็กคอลัมน์หนึ่งแทร็กและแทร็กหนึ่งแถว คุณค่าของ grid-template-areas เหมือนกับการจัดเรียงอักขระ ASCII และ as คริสแนะนำ ไม่นานมานี้ เราสามารถเห็นภาพโครงสร้างโดยรวมของเลย์เอาต์จากตัว CSS เองได้ ซึ่งเป็นวิธีการทำความเข้าใจที่ปราศจากปัญหามากที่สุด

ตกลง ดังนั้นเราจึงสร้างเลย์เอาต์ของเราด้วยสี่พื้นที่กริดที่มีชื่อ: head, nav, main, foot.

ตอนนี้ มาเริ่มวางตำแหน่งรายการกริดกับพื้นที่กริดที่มีชื่อแทนหมายเลขบรรทัด มาวาง a . กันดีกว่า header องค์ประกอบลงในพื้นที่กริดที่มีชื่อ head และระบุพื้นที่กริดที่มีชื่อ head ใน header องค์ประกอบโดยใช้ grid-area คุณสมบัติ

พื้นที่กริดที่มีชื่อในรูปแบบกริดเรียกว่า อัตลักษณ์. สิ่งที่เราเพิ่งทำคือสร้างรหัสที่กำหนดเองชื่อ head ที่เราสามารถใช้วางสิ่งของลงในรางกริดได้

header { grid-area: head; }

เราสามารถองค์ประกอบ HTML อื่น ๆ โดยใช้รหัสที่กำหนดเองอื่น ๆ :

nav { grid-area: nav; }
main { grid-area: main; }
footer { grid-area: foot; }

การเขียนค่าพื้นที่ที่มีชื่อ

ตามที่ CSS Grid Layout Module ระดับ 1สตริงทั้งหมดต้องถูกกำหนดภายใต้โทเค็นต่อไปนี้:

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

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

เราสามารถละเว้นเซลล์หรือปล่อยให้มันเป็น เซลล์ว่าง โดยใช้อักขระแบบเต็มสต็อป (.)

.grid { 
  display: grid;
  grid-template-areas:
    "head head"
    "nav main"
    "foot .";
}

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

.grid {
  display: grid;
  grid-template-areas:
    "head head"
    "nav main"
    "foot ....";
}

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

ASCII ดีกว่าการจัดวางตามบรรทัด

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

.grid-item {
  grid-column: 1 / 3; /* start at grid column line 1 and span to line 3 */
}

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

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

.grid {
  grid-template-areas:
    "head head"
    "nav main"
    "foot ...."; /* much easier way to see the grid! */
}

.grid-item {
  grid-area: foot; /* much easier to place the item! */
}

เราสามารถเห็นหมายเลขบรรทัดของกริดและพื้นที่กริดใน DevTools ตัวอย่างเช่น ใน Firefox ให้ไปที่แผงเค้าโครง จากนั้นภายใต้ ตะแกรง ค้นหาแท็บ “การตั้งค่าการแสดงตาราง” และเปิดใช้งาน “แสดงหมายเลขบรรทัด” และ “แสดงชื่อพื้นที่” ตัวเลือก

แนวทาง ASCII นี้โดยใช้พื้นที่ที่มีชื่อต้องใช้ความพยายามน้อยกว่ามากในการแสดงภาพและค้นหาตำแหน่งขององค์ประกอบได้อย่างง่ายดาย

มาดูการใช้งาน “สากล” กัน

เมื่อใดก็ตามที่ฉันเห็นบทช่วยสอนเกี่ยวกับพื้นที่กริดที่มีชื่อ ตัวอย่างทั่วไปคือรูปแบบเลย์เอาต์ที่มี header, main, sidebarและ footer พื้นที่ ฉันชอบคิดว่านี่เป็นกรณีการใช้งาน "สากล" เพราะมันมีตาข่ายกว้าง

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

ก่อนกำหนดเลย์เอาต์ ให้กำหนดรหัสให้กับแต่ละองค์ประกอบโดยใช้ grid-area คุณสมบัติเป็นสไตล์พื้นฐาน

header {
  grid-area: head;
}

.left-side {
  grid-area: left;
}

main {
  grid-area: main;
}

.right-side {
  grid-area: right;
}

footer {
  grid-area: foot;
}

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

.grid-container {
  display: grid;
  grid-template-areas:
    "head"
    "left"
    "main"
    "right"
    "foot";
}

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

.grid-container {
  display: grid;
  grid-template-areas:
    "head"
    "left"
    "main"
    "right"
    "foot";
  min-height: 100vh;
}

สมมติว่าเราต้องการ main องค์ประกอบที่จะนั่งทางด้านขวาของซ้อนกัน left และ right แถบด้านข้างเมื่อเราไปถึงความกว้างของวิวพอร์ตที่กว้างกว่าเล็กน้อย เราประกาศอีกครั้ง grid-template-areas ด้วยเลย์เอาต์ ASCII ที่อัปเดตเพื่อรับสิ่งนั้น:

@media (min-width: 800px) {
  .parent {
    grid-template-columns: 0.5fr 1fr;
    grid-template-rows: 100px 1fr 1fr 100px;
    grid-template-areas:
      "head head"
      "left main"
      "right main"
      "foot foot";
  }
}

ฉันโยนคอลัมน์และขนาดแถวไปที่นั่นเพื่อความสวยงามเท่านั้น

เมื่อเบราว์เซอร์กว้างขึ้น เราอาจต้องการเปลี่ยนเลย์เอาต์อีกครั้งเพื่อที่ main อยู่ระหว่าง left และ right แถบด้านข้าง มาเขียนเลย์เอาต์กันเถอะ!

.grid-container {
  grid-template-columns: 200px 1fr 200px; /* again, just for sizing */
  grid-template-areas:
    "head head head"
    "left main right"
    "left main right"
    "foot foot foot";
}

ใช้ประโยชน์จากชื่อบรรทัดโดยนัยเพื่อความยืดหยุ่น

ตามสเปกที่ว่า grid-template-areas สร้างชื่อสำหรับเส้นกริดที่สร้างโดยพื้นที่กริดที่มีชื่อโดยอัตโนมัติ เราเรียกเส้นกริดที่มีชื่อโดยปริยายเหล่านี้ เนื่องจากมีการตั้งชื่อให้เราฟรีโดยไม่ต้องดำเนินการใดๆ เพิ่มเติม

ทุกพื้นที่กริดที่มีชื่อจะได้รับเส้นกริดที่มีชื่อโดยนัยสี่เส้น สองเส้นอยู่ในทิศทางของคอลัมน์และอีกสองเส้นอยู่ในทิศทางของแถว โดยที่ -start และ -end ถูกผนวกเข้ากับรหัสประจำตัว ตัวอย่างเช่น พื้นที่กริดชื่อ head ได้รับ head-start และ head-end เส้นในทั้งสองทิศทางสำหรับเส้นกริดที่มีชื่อโดยนัยทั้งหมดสี่เส้น

เราสามารถใช้เส้นเหล่านี้เพื่อประโยชน์ของเรา! ตัวอย่างเช่น หากเราต้องการให้องค์ประกอบซ้อนทับ main, leftและ right พื้นที่ของกริดของเรา ก่อนหน้านี้ เราได้พูดถึงว่าเลย์เอาต์ต้องเป็นรูปสี่เหลี่ยมผืนผ้าอย่างไร ไม่อนุญาตให้ใช้เลย์เอาต์รูปตัว "T" และ "L" ด้วยเหตุนี้ เราจึงไม่สามารถใช้วิธีการจัดวางแบบวิชวลเลย์เอาต์ ASCII เพื่อวางโอเวอร์เลย์ได้ อย่างไรก็ตาม เราสามารถใช้ชื่อบรรทัดโดยนัยได้โดยใช้ชื่อเดียวกัน grid-area คุณสมบัติบนโอเวอร์เลย์ที่เราใช้เพื่อวางตำแหน่งองค์ประกอบอื่นๆ

คุณรู้หรือเปล่าว่า grid-area เป็นสมบัติชวเลข แบบเดียวกับที่ margin และ padding มีคุณสมบัติชวเลขหรือไม่? มันใช้ค่าหลายค่าในลักษณะเดียวกัน แต่แทนที่จะทำตามทิศทาง "ตามเข็มนาฬิกา" เช่น margin — ซึ่งไปตามลำดับของ margin-block-start, margin-inline-end, margin-block-endและ margin-inline-start - grid-area ไปเช่นนี้

grid-area: block-start / inline-start / block-end / inline-end;

แต่เรากำลังพูดถึงแถวและคอลัมน์ ไม่ใช่บล็อกและทิศทางแบบอินไลน์ใช่ไหม พวกเขาสอดคล้องกัน แกนของแถวสอดคล้องกับทิศทางของบล็อก และแกนของคอลัมน์สอดคล้องกับทิศทางแบบอินไลน์:

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end;

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

.overlay {
  grid-area: left-start / left-start / right-end / main-end;
}

การสร้างระบบกริดขั้นต่ำ

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

.grid-container {
  grid-template-areas:
    "head head head"
    "left main right"
    "left main right"
    "foot foot foot";
}

สังเกตว่า main, leftและ right ซ้ำแล้วซ้ำอีกแต่อยู่ในทิศทางบล็อก

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

ต่อไปนี้คือองค์ประกอบฮีโร่มาตรฐานที่สวยงามซึ่งแสดงภาพเป็นแถวตามด้วยบล็อกข้อความต่างๆ

HTML ค่อนข้างง่าย:

<div class="hero">
  <div class="image">
    <img src="..." alt="" />
  </div>
  <div class="text">
    <!-- ... -->
  </div>
</div>

เราสามารถทำได้สำหรับเลย์เอาต์แบบเรียงซ้อนที่รวดเร็วจริง:

.hero {
  grid-template-areas:
    "image"
    "text";
}

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

.hero {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* maintain equal sizing */
  grid-template-areas:
    "image image image image"
    "text  text  text  text";
}

เอาล่ะ ตอนนี้เราสามารถวางรายการกริดของเราในพื้นที่ที่มีชื่อเหล่านั้น:

.hero .image {
  grid-area: image;
}

.hero .text {
  grid-area: text;
}

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

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

@media (min-width: 800px) {
  main {
    grid-template-columns: repeat(6, 1fr); /* increase to six columns */
    grid-template-areas:
      "image image image image image image"
      "..... text  text  text  text  .....";
  }
}

ตอนนี้เรามีระยะห่างที่เราต้องการ:

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

.hero {
  grid-template-columns: repeat(8, 1fr);
  grid-template-areas:
    "image image image image image image image image"
    "..... text  text  text  text  text  text  .....";
}

การสร้างภาพเครื่องมือ Dev:

จำได้ไหมว่ารูปแบบ 12 คอลัมน์และ 16 คอลัมน์มีความสำคัญในเฟรมเวิร์ก CSS หรือไม่? เราสามารถปรับขนาดได้อย่างรวดเร็วและรักษารูปแบบ ASCII ที่มองเห็นได้ชัดเจนในโค้ด:

main {
  grid-template-columns: repeat(12, 1fr);
  grid-template-areas:
    "image image image image image image image image image image image image"
    "..... text  text  text  text  text  text  text  text  text  text  .....";
}

มาดูอะไรที่ซับซ้อนกว่ากัน

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

มาทำงานกัน:

ฉันได้แยกสิ่งนี้ออกเป็นสององค์ประกอบใน HTML, a header และ main:

<header>
  <div class="logo"> ... </div>
  <div class="menu"> ... </div>
</header>
<main>
  <div class="image"> ... </div>
  <h2> ... </h2>
  <div class="image"> ... </div>
  <div class="image"> ... </div>
</main>

ฉันคิดว่า flexbox เหมาะสมกว่าสำหรับ header เนื่องจากเราสามารถแบ่งองค์ประกอบลูกออกได้อย่างง่ายดายแบบนั้น ดังนั้น ไม่ grid ที่นั่น:

header {
  display: flex;
  justify-content: space-between;
  /* etc. */
}

แต่ grid เหมาะสำหรับ main เลย์เอาต์ขององค์ประกอบ มากำหนดเค้าโครงและกำหนดรหัสให้กับองค์ประกอบที่เกี่ยวข้องที่เราจำเป็นต้องวางตำแหน่ง .text และสาม .image องค์ประกอบ เราจะเริ่มต้นด้วยสิ่งนี้เป็นพื้นฐานของเราสำหรับหน้าจอขนาดเล็ก:

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "image1 image1 .....  image2"
    "texts  texts  texts  texts"
    ".....  image3 image3 .....";
}

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

.image:nth-child(1) {
  grid-area: image1;
}

.image:nth-last-child(2) {
  grid-area: image2;
}

.image:nth-last-child(1) {
  grid-area: image3;
}

h2 {
  grid-area: texts;
}

นั่นคือเลย์เอาต์พื้นฐานของเรา เรามาลองเสี่ยงกับเบรกพอยต์ที่กว้างขึ้นกัน:

@media (min-width: 800px) {
  .grid {
    grid-template-columns: repeat(8, 1fr);
    grid-template-areas:
      ". image1 image1 ...... ......  ...... image2 ."
      ". texts  texts  texts  texts   texts  image2 ."
      ". .....  image3 image3 image3  image3 ...... .";
  }
}

ฉันพนันได้เลยว่าคุณรู้ดีว่าจะมีลักษณะอย่างไรเพราะเลย์เอาต์นั้นอยู่ที่นั่นในโค้ด!

ข้อตกลงเดียวกันหากเราตัดสินใจที่จะขยายขนาดให้ดียิ่งขึ้น:

.grid {
  grid-template-columns: repeat(12, 1fr);
  grid-template-areas:
    ". image1 image1 .....  .....   .....  .....  .....  .....  .....  .....  ."
    ". texts  texts  texts  texts   texts  texts  texts  texts  texts  image2 ."
    ". .....  image3 image3 image3  image3 .....  .....  .....  .....  .....  .";
}

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

ฉันกำลังใช้ “เชิงลบ margin hack” เพื่อให้ได้ภาพแรกที่ซ้อนทับส่วนหัว

ตัดขึ้น

อยากรู้ว่ามีใครใช้บ้าง grid-template-areas เพื่อสร้างพื้นที่ที่มีชื่อเพื่อประโยชน์ในการมีภาพ ASCII ของเลย์เอาต์กริด การมีสิ่งนั้นเป็นข้อมูลอ้างอิงในโค้ด CSS ของฉันได้ช่วยขจัดความลึกลับของการออกแบบที่ซับซ้อนอย่างอื่นที่อาจซับซ้อนยิ่งขึ้นเมื่อจัดการกับหมายเลขบรรทัด

แต่ถ้าไม่มีอะไรอื่น การกำหนดเค้าโครงกริดด้วยวิธีนี้จะสอนสิ่งที่น่าสนใจเกี่ยวกับ CSS Grid ที่เราเห็นในโพสต์นี้:

• พื้นที่ grid-template-areas คุณสมบัติช่วยให้เราสร้างรหัสที่กำหนดเอง — หรือ “พื้นที่ที่มีชื่อ” — และใช้เพื่อวางตำแหน่งรายการกริดโดยใช้ grid-area คุณสมบัติ
• “โทเค็น” มีสามประเภทที่ grid-template-areas ยอมรับเป็นค่า รวมถึงโทเค็นเซลล์ที่มีชื่อ โทเค็นเซลล์ว่าง และโทเค็นเซลล์ขยะ
• แต่ละแถวที่กำหนดไว้ใน grid-template-areas ต้องการจำนวนเซลล์เท่ากัน การละเว้นเซลล์เดียวไม่ได้สร้างเค้าโครง ถือว่าเป็นโทเค็นถังขยะ
• เราสามารถรับไดอะแกรมเหมือน ASCII ที่มองเห็นได้ของเลย์เอาต์กริดใน grid-template-areas ค่าคุณสมบัติโดยใช้ช่องว่างที่จำเป็นระหว่างโทเค็นเซลล์ที่มีชื่อในขณะที่กำหนดเค้าโครงกริด
• ตรวจสอบให้แน่ใจว่าไม่มีช่องว่างภายในโทเค็นเซลล์ว่าง (เช่น .....). มิฉะนั้น ช่องว่างเดียวระหว่างโทเค็นเซลล์ว่างจะสร้างเซลล์ว่างที่ไม่จำเป็น ส่งผลให้เลย์เอาต์ไม่ถูกต้อง
• เราสามารถกำหนดรูปแบบใหม่ที่จุดพักต่างๆ โดยการจัดตำแหน่งรายการกริดใหม่โดยใช้ grid-areaแล้วประกาศเลย์เอาต์ใหม่ด้วย grid-template-areas บนคอนเทนเนอร์กริดเพื่ออัปเดตรายการแทร็ก หากจำเป็น ไม่จำเป็นต้องแตะรายการกริด
• พื้นที่กริดที่มีชื่อแบบกำหนดเองจะได้รับชื่อบรรทัดที่กำหนดโดยปริยายสี่ชื่อโดยอัตโนมัติ — <custom-ident>-start และ <custom-ident>-end ทั้งในคอลัมน์และทิศทางของแถว