เค้าโครงตาราง CSS

สารบัญ

    แสดงสารบัญ

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

Header

Menu

Main

Right

Footer


ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>Grid Layout</h1>

<p>The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning:</p>

<div class="grid-container">
  <div class="item1">Header</div>
  <div class="item2">Menu</div>
  <div class="item3">Main</div>  
  <div class="item4">Right</div>
  <div class="item5">Footer</div>
</div>

</body>
</html>

เค้าโครงตารางต้องมีองค์ประกอบหลักที่มีคุณสมบัติ display ตั้งค่าเป็น grid

องค์ประกอบลูกโดยตรงของคอนเทนเนอร์กริดจะกลายเป็นรายการกริดโดยอัตโนมัติ

1
2
3
4
5
6
7

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px;
  font-size: 30px;
}

.item1 {
  grid-row: 1;
  grid-column: 1;
}

.item2 {
  grid-row: 1;
  grid-column: 2;
}

.item3 {
  grid-row: 1;
  grid-column: 3;
}

.item4 {
  grid-row: 2;
  grid-column: 1;
}

.item5 {
  grid-row: 2;
  grid-column: 2;
}

.item6 {
  grid-row: 2;
  grid-column: 3;
}

.item7 {
  grid-row: 3;
  grid-column: 1 / span 3;
}
</style>
</head>
<body>

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

<p>A Grid Layout must have a parent element with the <em>display</em> property set to <em>grid</em>.</p>

<p>Direct child elements(s) of the grid container automatically becomes grid items.</p>

</body>
</html>

เค้าโครงตาราง

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

รองรับเบราว์เซอร์

คุณสมบัติกริดได้รับการสนับสนุนในเบราว์เซอร์สมัยใหม่ทั้งหมด

57.0 16.0 52.0 10 44

องค์ประกอบตาราง

เค้าโครงตารางประกอบด้วยองค์ประกอบหลัก โดยมีองค์ประกอบย่อยตั้งแต่หนึ่งรายการขึ้นไป

ตัวอย่าง

<div 
  class="grid-container">
  <div class="grid-item">1</div>
  <div 
  class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div 
  class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div 
  class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

1

2

3

4

5

6

7

8

9

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<h1>Grid Elements</h1>

<p>A Grid Layout must have a parent element with the <em>display</em> property set to <em>grid</em> or <em>inline-grid</em>.</p>

<p>Direct child element(s) of the grid container automatically becomes grid items.</p>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>

</body>
</html>

แสดงคุณสมบัติ

องค์ประกอบ HTML กลายเป็นภาชนะตารางเมื่อคุณสมบัติ display ถูกตั้งค่าเป็น grid หรือ inline-grid

ตัวอย่าง

 .grid-container {
  
  display: grid;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<h1>display: grid</h1>

<p>Use display: grid; to make a block-level grid container:</p>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>

</body>
</html>

ตัวอย่าง

 .grid-container {
  
  display: inline-grid;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: inline-grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<h1>display: inline-grid</h1>

<p>Use display: inline-grid; to make an inline grid container:</p>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>

</body>
</html>

ลูกโดยตรงทั้งหมดของคอนเทนเนอร์กริดจะกลายเป็น รายการกริด โดยอัตโนมัติ

คอลัมน์กริด

เส้นแนวตั้งของรายการตารางเรียกว่า คอลัมน์

แถวตาราง

เส้นแนวนอนของรายการตารางเรียกว่า แถว

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

ช่องว่างระหว่างแต่ละคอลัมน์/แถวเรียกว่า ช่องว่าง

คุณสามารถปรับขนาดช่องว่างได้โดยใช้คุณสมบัติอย่างใดอย่างหนึ่งต่อไปนี้:

  • column-gap
  • row-gap
  • gap

ตัวอย่าง

column-gap คุณสมบัติกำหนดช่องว่างระหว่างคอลัมน์:

 .grid-container {
  
  display: grid;
  column-gap: 50px;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  column-gap: 50px;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<h1>The column-gap Property</h1>

<p>Use the <em>column-gap</em> property to adjust the space between the columns:</p>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>

</body>
</html>

ตัวอย่าง

row-gap คุณสมบัติกำหนดช่องว่างระหว่างแถว:

 .grid-container {
  
  display: grid;
  row-gap: 50px;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  row-gap: 50px;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<h1>The row-gap Property</h1>

<p>Use the <em>row-gap</em> property to adjust the space between the rows:</p>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>

</body>
</html>

ตัวอย่าง

gap คุณสมบัติเป็นคุณสมบัติชวเลขสำหรับ row-gap และ คุณสมบัติ column-gap:

 .grid-container {
  
  display: grid;
  gap: 50px 100px;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  gap: 50px 100px;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<h1>The gap Property</h1>

<p>Use the <em>gap</em> shorthand property to adjust the space between the columns and rows.</p>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>

</body>
</html>

ตัวอย่าง

คุณสมบัติ gap ยังสามารถใช้เพื่อตั้งค่าทั้งช่องว่างของแถวและ ช่องว่างของคอลัมน์ในหนึ่งค่า:

 .grid-container {
  
  display: grid;
  gap: 50px;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  gap: 50px;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<h1>The gap Property:</h1>

<p>Use the <em>gap</em> shorthand property to adjust the space between the columns and rows:</p>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>

</body>
</html>

เส้นตาราง

เส้นระหว่างคอลัมน์เรียกว่า เส้นคอลัมน์

เส้นระหว่างแถวเรียกว่า เส้นแถว

อ้างถึงหมายเลขบรรทัดเมื่อวางรายการกริดในคอนเทนเนอร์กริด:

ตัวอย่าง

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

 .item1 {

    grid-column-start: 1;
  grid-column-end: 3;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}
</style>
</head>
<body>

<h1>Grid Lines</h1>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>  
</div>

<p>You can refer to line numbers when placing grid items.</p>

</body>
</html>

ตัวอย่าง

วางรายการตารางที่แถวบรรทัดที่ 1 และปล่อยให้สิ้นสุดที่แถวบรรทัดที่ 3:

 .item1 {

    grid-row-start: 1;
  grid-row-end: 3;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}
</style>
</head>
<body>

<h1>Grid Lines</h1>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>  
</div>

<p>You can refer to line numbers when placing grid items.</p>

</body>
</html>

คุณสมบัติตาราง CSS ทั้งหมด

column-gap

ระบุช่องว่างระหว่างคอลัมน์

gap

คุณสมบัติชวเลขสำหรับคุณสมบัติ row-gap และ column-gap

grid

คุณสมบัติชวเลขสำหรับ grid-template-rows ตารางเทมเพลตคอลัมน์, ตารางเทมเพลตพื้นที่, ตารางอัตโนมัติแถว, grid-auto-columns และคุณสมบัติ grid-auto-flow

grid-area

ไม่ว่าจะระบุชื่อสำหรับรายการกริด หรือคุณสมบัตินี้เป็นคุณสมบัติชวเลขสำหรับ grid-row-start, grid-column-start, grid-row -end และ grid-column-end คุณสมบัติ

grid-auto-columns

ระบุขนาดคอลัมน์เริ่มต้น

grid-auto-flow

ระบุวิธีการแทรกรายการที่วางอัตโนมัติในตาราง

grid-auto-rows

ระบุขนาดแถวเริ่มต้น

grid-column

คุณสมบัติชวเลขสำหรับคุณสมบัติ grid-column-start และ grid-column-end

grid-column-end

ระบุตำแหน่งที่จะสิ้นสุดรายการกริด

grid-column-gap

ระบุขนาดของช่องว่างระหว่างคอลัมน์

grid-column-start

ระบุตำแหน่งที่จะเริ่มรายการกริด

grid-gap

คุณสมบัติชวเลขสำหรับคุณสมบัติ grid-row-gap และ grid-column-gap

grid-row

คุณสมบัติชวเลขสำหรับคุณสมบัติ grid-row-start และ grid-row-end

grid-row-end

ระบุตำแหน่งที่จะสิ้นสุดรายการกริด

grid-row-gap

ระบุขนาดของช่องว่างระหว่างแถว

grid-row-start

ระบุตำแหน่งที่จะเริ่มรายการกริด

grid-template

คุณสมบัติชวเลขสำหรับ grid-template-rows, grid-template-columns และคุณสมบัติ พื้นที่กริด

grid-template-areas

ระบุวิธีการแสดงคอลัมน์และแถว โดยใช้รายการตารางที่มีชื่อ

grid-template-columns

ระบุขนาดของคอลัมน์ และจำนวนคอลัมน์ในเค้าโครงตาราง

grid-template-rows

ระบุขนาดของแถวในรูปแบบกริด

row-gap

ระบุช่องว่างระหว่างแถวกริด