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

คุณสมบัติ CSS ที่เกี่ยวข้องกับการจัดเลย์เอาท์แบบกริด

บทความนี้อธิบายคุณสมบัติ CSS ที่เกี่ยวข้องกับการจัดเลย์เอาท์แบบกริด

คุณสามารถเรียนรู้วิธีการอธิบายกริดและกริดแบบอินไลน์ได้

YouTube Video

HTML สำหรับการแสดงตัวอย่าง

css-grid.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-grid.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Layout</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Layout Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>grid</h3>
 23            <section style="width: 100%; height: 350px;">
 24                <header><h4>display: grid; grid-template-columns: 100px 200px auto; grid-template-rows: 100px auto 50px;</h4></header>
 25                <section class="sample-view">
 26                    <div class="grid-box">
 27                        <div class="grid-item">Item 1</div>
 28                        <div class="grid-item">Item 2</div>
 29                        <div class="grid-item">Item 3</div>
 30                        <div class="grid-item">Item 4</div>
 31                        <div class="grid-item">Item 5</div>
 32                        <div class="grid-item">Item 6</div>
 33                    </div>
 34                </section>
 35            </section>
 36            <section style="width: 100%; height: 550px;">
 37                <header><h4>display: grid; grid-template-columns: 120px 1fr 80px; grid-template-rows: 100px 1fr 100px;</h4></header>
 38                <section class="sample-view">
 39                    <div class="grid-container" style="color: #666;">
 40                        <header class="grid-header">Header</header>
 41                        <aside class="grid-sidebar">Sidebar</aside>
 42                        <article class="grid-content">
 43                            <p>Content</p>
 44                        </article>
 45                        <aside class="grid-ads">Ads</aside>
 46                        <footer class="grid-footer">Footer</footer>
 47                    </div>
 48                </section>
 49            </section>
 50        </article>
 51        <article>
 52            <h3>gap</h3>
 53            <section style="height: 300px;">
 54                <header><h4>display: grid; gap: 30px 10px;</h4></header>
 55                <section class="sample-view">
 56                    <div class="gap-grid-container">
 57                        <div>Item 1</div>
 58                        <div>Item 2</div>
 59                        <div>Item 3</div>
 60                        <div>Item 4</div>
 61                        <div>Item 5</div>
 62                        <div>Item 6</div>
 63                    </div>
 64                </section>
 65            </section>
 66            <section>
 67                <header><h4>display: flex; gap: 50px;</h4></header>
 68                <section class="sample-view">
 69                    <div class="gap-flex-container">
 70                        <div>Item 1</div>
 71                        <div>Item 2</div>
 72                        <div>Item 3</div>
 73                    </div>
 74                </section>
 75            </section>
 76        </article>
 77        <article>
 78            <h3>grid-template-areas</h3>
 79            <section style="height: 350px;">
 80                <header><h4>grid-template-areas: "header header" "sidebar content" "footer footer";</h4></header>
 81                <section class="sample-view">
 82                    <div class="grid-template-areas-container">
 83                        <div class="grid-template-areas-header">Header</div>
 84                        <div class="grid-template-areas-sidebar">Sidebar</div>
 85                        <div class="grid-template-areas-content">Content</div>
 86                        <div class="grid-template-areas-footer">Footer</div>
 87                    </div>
 88                </section>
 89            </section>
 90        </article>
 91        <article>
 92            <h3>inline-grid</h3>
 93            <section>
 94                <header><h4>display: inline-grid</h4></header>
 95                <section class="sample-view">
 96                  Here is an inline grid:
 97                  <span class="inline-grid-container">
 98                      <div class="inline-grid-item">1</div>
 99                      <div class="inline-grid-item">2</div>
100                      <div class="inline-grid-item">3</div>
101                      <div class="inline-grid-item">4</div>
102                  </span>
103                  This is contained within a paragraph.
104                </section>
105            </section>
106        </article>
107    </main>
108</body>
109</html>

การจัดเลย์เอาท์แบบกริด

กริด 

 1.grid-box {
 2    display: grid;
 3    grid-template-columns: 100px 200px auto;
 4    grid-template-rows: 100px auto 50px;
 5    gap: 10px;
 6    background-color: lightblue;
 7    border: none;
 8    height: 200px;
 9}
10
11.grid-item {
12    background-color: lightskyblue;
13    width: 100%;
14    padding: 0;
15    text-align: center;
16    border: 2px solid black;
17}

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

  • คลาส grid-box ใช้การจัดเลย์เอาท์แบบกริดโดยการระบุ กริด ในพร็อพเพอร์ตี้ display องค์ประกอบนี้เรียกว่ากริดคอนเทนเนอร์
  • พร็อพเพอร์ตี้ grid-template-columns ระบุความกว้างของคอลัมน์ในกริด ในตัวอย่างนี้ คอลัมน์แรกมีความกว้าง 100px คอลัมน์ที่สองกว้าง 200px และคอลัมน์ที่สามใช้พื้นที่ที่เหลืออยู่ (auto)
  • พร็อพเพอร์ตี้ grid-template-rows ระบุความสูงของแถวในกริด แถวแรกมีความสูง 100px แถวที่สองเป็นแบบอัตโนมัติ (auto) และแถวที่สามมีความสูง 50px
  • พร็อพเพอร์ตี้ gap กำหนดระยะห่างระหว่างไอเทมในกริด เพิ่มระยะห่าง 10px ระหว่างคอลัมน์และแถว

คำศัพท์พื้นฐาน

  1. กริดคอนเทนเนอร์คือองค์ประกอบที่ตั้งค่าพร็อพเพอร์ตี้ display เป็น grid และองค์ประกอบลูกจะกลายเป็นไอเทมในกริด
  2. ไอเทมในกริดคือองค์ประกอบลูกที่อยู่ภายใตกริดคอนเทนเนอร์โดยตรง

คุณสมบัติหลักของกริด

grid-template-columns & grid-template-rows 
1.container {
2    grid-template-columns: 1fr 2fr 1fr;
3}
  • พร็อพเพอร์ตี้ grid-template-columns และ grid-template-rows กำหนดขนาดของแต่ละคอลัมน์และแถว
  • สามารถใช้หน่วยต่างๆ เช่น px และ % รวมถึง fr (สัดส่วน) เพื่อระบุสัดส่วนของพื้นที่ที่เหลืออยู่
    • ในตัวอย่างนี้ มีสามคอลัมน์ และคอลัมน์ที่สองมีความกว้างเป็นสองเท่าของคอลัมน์อื่นๆ
grid-column & grid-row 
 1.container {
 2  display: grid;
 3  grid-template-columns: repeat(4, 1fr); /* 4 columns */
 4  grid-template-rows: repeat(3, 100px); /* 3 rows */
 5}
 6
 7.item {
 8  grid-column: 2 / 4;
 9  grid-row: 1 / 3;
10}
  • grid-column และ grid-row ใช้เพื่อกำหนดว่ารายการในกริดจะอยู่ในคอลัมน์หรือแถวใด
    • ในตัวอย่างนี้ รายการครอบคลุมตั้งแต่คอลัมน์ที่ 2 ถึงคอลัมน์ที่ 4 และตั้งแต่แถวที่ 1 ถึงแถวที่ 3
grid-auto-rows & grid-auto-columns 
 1.container {
 2  display: grid;
 3  grid-template-rows: 100px 200px; /* Explicitly define 2 rows */
 4  grid-template-columns: 1fr 2fr; /* Explicitly define 2 columns */
 5  grid-auto-rows: 150px; /* Automatically added rows will be 150px */
 6  grid-auto-columns: 100px; /* Automatically added columns will be 100px */
 7}
 8
 9.item {
10  grid-column: 3; /* Positioned in the 3rd column (auto-generated) */
11  grid-row: 3; /* Positioned in the 3rd row (auto-generated) */
12}
  • grid-auto-rows และ grid-auto-columns เป็นคุณสมบัติที่ใช้ควบคุมขนาดของแถวและคอลัมน์ที่ถูกสร้างอัตโนมัติเมื่อตำแหน่งแถวหรือคอลัมน์ในกริดไม่ได้ถูกกำหนดไว้อย่างชัดเจน
    • ในตัวอย่างนี้ มีการกำหนด 2 แถวและ 2 คอลัมน์ไว้อย่างชัดเจน แต่ถ้ามีการเพิ่มองค์ประกอบมากขึ้น แถวหรือคอลัมน์ใหม่จะถูกสร้างโดยอัตโนมัติตาม grid-auto-rows และ grid-auto-columns
justify-items & align-items 
1.container {
2    justify-items: center; /* Center items horizontally */
3    align-items: center;   /* Center items vertically */
4}
  • จัดตำแหน่งรายการในกริดในแนวนอน (justify-items) และแนวตั้ง (align-items)
grid-area 
1/* grid-area syntax
2grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
3*/
4.item {
5    grid-area: 1 / 2 / 3 / 4;
6}
  • grid-area ระบุพื้นที่ในคอนเทนเนอร์กริดที่ไอเท็มกริดควรถูกวางลงไป
    • ในตัวอย่างนี้ หมายถึงการครอบคลุมตั้งแต่แถวที่ 1 ถึงแถวที่ 3 และตั้งแต่คอลัมน์ที่ 2 ถึงคอลัมน์ที่ 4
gap 
1.container {
2    gap: 10px 20px; /* 10px space between rows, 20px space between columns */
3}
  • gap เพิ่มพื้นที่ว่างระหว่างคอลัมน์และแถว คุณยังสามารถระบุช่องว่างระหว่างคอลัมน์และแถวแยกจากกันโดยใช้ column-gap และ row-gap
grid-auto-flow 
1.container {
2    grid-auto-flow: column; /* Add items in the column direction */
3}
  • grid-auto-flow เป็นคุณสมบัติที่กำหนดทิศทางในการจัดวางไอเท็มว่าจะเรียงตามแถวหรือคอลัมน์

ตัวอย่างของเลย์เอาท์ที่ซับซ้อน 

 1.grid-container {
 2    display: grid;
 3    grid-template-columns: 120px 1fr 80px;
 4    grid-template-rows: 50px 1fr 50px;
 5    gap: 10px;
 6    background-color: transparent;
 7    border: none;
 8    height: 400px;
 9}
10
11.grid-header {
12    grid-column: 1 / 4;
13    background-color: lightblue;
14}
15
16.grid-sidebar {
17    grid-column: 1 / 2;
18    grid-row: 2 / 3;
19    height: 100%;
20    background-color: lightslategray;
21    color: white;
22}
23
24.grid-content {
25    grid-column: 2 / 3;
26    grid-row: 2 / 3;
27    background-color: lightskyblue;
28}
29
30.grid-content p {
31    margin: 0;
32    padding: 0;
33    height: 260px;
34}
35
36.grid-ads {
37    grid-column: 3 / 4;
38    grid-row: 2 / 3;
39    height: 100%;
40    background-color: lightsteelblue;
41}
42
43.grid-footer {
44    grid-column: 1 / 4;
45    background-color: lightgray;
46}

ด้วยวิธีนี้ กริดช่วยให้คุณสามารถสร้างรูปแบบหน้าเว็บทั้งหมดได้ด้วยโค้ดที่เรียบง่าย

  • ในตัวอย่างนี้ มีสามคอลัมน์ (แถบด้านข้าง เนื้อหาหลัก และโฆษณา) และสามแถว (ส่วนหัว เนื้อหา และส่วนท้าย)
  • ส่วนหัวและส่วนท้ายครอบคลุมความกว้างทั้งหน้าของเว็บ โดยมีเนื้อหาอยู่ตรงกลาง และแถบด้านข้างกับโฆษณาอยู่ทั้งสองด้าน

ข้อดีของกริด

ข้อดีของกริดมีดังนี้:

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

คุณสมบัติ gap 

 1.gap-grid-container {
 2    display: grid;
 3    grid-template-columns: repeat(3, 1fr);
 4    gap: 30px 10px;
 5    background-color: transparent;
 6    border: none;
 7    height: 200px;
 8}
 9
10.gap-grid-container div {
11    width: 100px;
12    background-color: lightskyblue;
13}
14
15.gap-flex-container {
16    display: flex;
17    gap: 50px;
18}
19
20.gap-flex-container div {
21    width: 80px;
22    background-color: lightgreen;
23}

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

  • ในคลาส gap-grid-container จะตั้งค่าช่องว่างแนวตั้ง 30px และแนวนอน 10px ระหว่างแต่ละองค์ประกอบ เนื่องจากกริดแบบ 3 คอลัมน์ถูกสร้างขึ้นด้วย grid-template-columns ช่องว่างจะถูกตั้งทั้งแนวตั้งและแนวนอนระหว่างแต่ละองค์ประกอบ ในคลาส gap-flex-container ช่องว่าง 50px ถูกตั้งระหว่างสามรายการใน flexbox

ไวยกรณ์พื้นฐาน 

1.container {
2  display: grid; /* or flex */
3  gap: <row-gap> <column-gap>;
4}
  • row-gap ใช้ระบุช่องว่างระหว่างแถว นี่คือช่องว่างแนวตั้งในเลย์เอาต์แบบกริดหรือเฟล็กซ์
  • column-gap ใช้ระบุช่องว่างระหว่างคอลัมน์ นี่คือช่องว่างแนวนอน

หากไม่มีการระบุค่าสองค่า ค่าหนึ่งจะถูกใช้ทั้ง row-gap และ column-gap

ข้อดีของคุณสมบัติ gap

ประโยชน์ของคุณสมบัติ gap มีดังต่อไปนี้:

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

คุณสมบัติ grid-template-areas 

 1.grid-template-areas-container {
 2    display: grid;
 3    grid-template-columns: 1fr 2fr; /* 2 columns */
 4    grid-template-rows: auto auto;  /* 2 rows */
 5    grid-template-areas:
 6      "header header"
 7      "sidebar content"
 8      "footer footer"; /* In the 3rd row, the footer spans across */
 9    gap: 10px;
10    height: 250px;
11}
12
13.grid-template-areas-container div {
14    width: 100%;
15    height: 100%;
16}
17
18.grid-template-areas-header {
19    grid-area: header; /* Placed in the "header" area */
20    background-color: lightblue;
21}
22
23.grid-template-areas-sidebar {
24    grid-area: sidebar; /* Placed in the "sidebar" area */
25    background-color: lightslategray;
26}
27
28.grid-template-areas-content {
29    grid-area: content; /* Placed in the "content" area */
30    background-color: lightskyblue;
31}
32
33.grid-template-areas-footer {
34    grid-area: footer; /* Placed in the "footer" area */
35    background-color: lightsteelblue;
36}

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

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

ในตัวอย่างนี้ กริดจะถูกสร้างดังนี้:

  • ในแถวแรก "header" จะวางอยู่ในสองคอลัมน์
  • "Sidebar" จะวางทางซ้ายและ "content" วางทางขวาในแถวที่สอง
  • "Footer" จะวางอยู่ในสองคอลัมน์ในแถวที่สาม

การใช้งานพื้นฐาน 

1grid-template-areas:
2    "area1 area2 area3"
3    "area1 area4 area5";

ในคุณสมบัติ grid-template-areas จะกำหนดชื่อของพื้นที่สำหรับแต่ละแถว โดยการวางองค์ประกอบในพื้นที่ที่มีการตั้งชื่อ คุณสามารถสร้างเลย์เอาต์ได้ง่ายดาย - ในตัวอย่างนี้ กริดที่มี 2 แถวและ 3 คอลัมน์ถูกสร้างขึ้น และแต่ละเซลล์ถูกกำหนดชื่อเป็น area1, area2 เป็นต้น

การกำหนดเซลล์ว่างโดยใช้ . 

1grid-template-areas:
2  "header header header"
3  "sidebar . content"
4  "footer footer footer";

หากคุณต้องการมีเซลล์ว่างในเลย์เอาต์ของคุณ คุณสามารถแทนเซลล์ว่างด้วย . (จุด) - ดังในตัวอย่างนี้ ด้วยการระบุ . ระหว่าง sidebar และ content ทำให้คอลัมน์ที่สองกลายเป็นเซลล์ว่าง

ข้อดีของสมบัติ grid-template-areas

ข้อดีของสมบัติ grid-template-areas ได้แก่หัวข้อต่อไปนี้

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

หมายเหตุ

เมื่อใช้งานสมบัติ grid-template-areas ควรให้ความสำคัญกับประเด็นต่อไปนี้

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

inline-grid 

 1.inline-grid-container {
 2    display: inline-grid;
 3    grid-template-columns: 1fr 1fr;
 4    gap: 5px;
 5    background-color: lightblue;
 6}
 7.inline-grid-item {
 8    background-color: lightskyblue;
 9    width: 50px;
10    padding: 0;
11    margin: 0;
12}

inline-grid เป็นหนึ่งในค่าในสมบัติ display ใน CSS การใช้สมบัตินี้ทำให้องค์ประกอบแสดงผลเป็นคอนเทนเนอร์ระดับอินไลน์ และสร้างบริบทการจัดรูปแบบกริดภายใน ต่างจาก display: grid ตรงที่มันแสดงตัวเป็นองค์ประกอบแบบอินไลน์ในลำดับเอกสาร

กรณีการใช้งาน inline-grid

inline-grid ไม่ได้เป็นที่นิยมเท่า grid แต่สามารถใช้งานได้อย่างมีประสิทธิภาพในบางสถานการณ์เฉพาะ

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

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

1<button class="inline-grid">
2    <span>Icon</span>
3    <span>Text</span>
4</button>

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

  • องค์ประกอบอินไลน์ที่ตอบสนองได้: inline-grid สามารถใช้กับองค์ประกอบขนาดเล็กที่เป็นส่วนหนึ่งของเนื้อหาอินไลน์และต้องการเลย์เอาต์แบบกริด ตัวอย่างเช่น เหมาะสำหรับฟอร์มอินไลน์ เหรียญตรา หรือป้ายสินค้า ที่ต้องการปรับเลย์เอาต์ด้วยกริดในขณะที่ยังคงแสดงผลเป็นอินไลน์

การจัดตำแหน่งและขนาดของ inline-grid 

1.inline-grid {
2    display: inline-grid;
3    vertical-align: middle;
4}
  • เช่นเดียวกับองค์ประกอบอินไลน์อื่น ๆ inline-grid เคารพการจัดตำแหน่งในแนวตั้งเมื่อเทียบกับเนื้อหาที่อยู่รอบข้าง คุณสามารถควบคุมการจัดตำแหน่งของกริดโดยใช้สมบัติ vertical-align
1.inline-grid {
2    display: inline-grid;
3    width: 200px;
4    height: 100px;
5}
  • ในแง่ของขนาด องค์ประกอบ inline-grid จะใช้ความกว้างเพียงเท่าที่เนื้อหาในกริดต้องการ หากจำเป็น คุณสามารถกำหนดความกว้าง ความสูง และขนาดขั้นต่ำ/ขนาดสูงสุดได้อย่างชัดเจน
1.inline-grid {
2    display: inline-grid;
3    grid-template-columns: auto 1fr;
4}

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

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video

คุณสมบัติ CSS ที่เกี่ยวข้องกับ Flexboxคุณสมบัติ CSS ที่เกี่ยวข้องกับการจัดเลย์เอาต์แบบคอลัมน์