คอร์ส IT พื้นฐาน CSS 031_เลย์เอาต์กริด Grid

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: 100px 200px auto;
4
    /* คอลัมน์แรก 100px, คอลัมน์ที่สอง 200px, พื้นที่ที่เหลือจัดสรรให้คอลัมน์แบบปรับได้ */
5
    grid-template-rows: 100px 200px auto;
6
    /* แถวแรก 100px, แถวที่สอง 200px, พื้นที่ที่เหลือจัดสรรให้แถวแบบปรับได้ */
7
}
8
.item{
9
    margin: 10px;
10
    background-color: rgb(100, 150, 200);
11
}

1
    <div class="grid-example">
2
        <div class="item">สาธิต Grid</div>
3
        <div class="item">สาธิต Grid</div>
4
        <div class="item">สาธิต Grid</div>
5
        <div class="item">สาธิต Grid</div>
6
        <div class="item">สาธิต Grid</div>
7
        <div class="item">สาธิต Grid</div>
8
        <div class="item">สาธิต Grid</div>
9
        <div class="item">สาธิต Grid</div>
10
        <div class="item">สาธิต Grid</div>
11
    </div>

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: 30% 2fr 1fr;
4
    /* คอลัมน์แรกครอบครอง 30%, คอลัมน์ที่สองครอบครองสองส่วนของพื้นที่ที่เหลือ, คอลัมน์ที่สามครอบครองหนึ่งส่วนของพื้นที่ที่เหลือ */
5
    grid-template-rows: 30% 2fr 1fr;
6
    /* แถวแรกครอบครอง 30%, แถวที่สองครอบครองสองส่วนของพื้นที่ที่เหลือ, แถวที่สามครอบครองหนึ่งส่วนของพื้นที่ที่เหลือ */
7
}
8
.item{
9
    margin: 10px;
10
    background-color: rgb(100, 150, 200);
11
}

1
    <div class="grid-example">
2
        <div class="item">สาธิต Grid</div>
3
        <div class="item">สาธิต Grid</div>
4
        <div class="item">สาธิต Grid</div>
5
        <div class="item">สาธิต Grid</div>
6
        <div class="item">สาธิต Grid</div>
7
        <div class="item">สาธิต Grid</div>
8
        <div class="item">สาธิต Grid</div>
9
        <div class="item">สาธิต Grid</div>
10
        <div class="item">สาธิต Grid</div>
11
    </div>

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: repeat(3, 1fr);
4
    /* แบ่งคอลัมน์เป็น 3 ส่วนเท่าๆ กัน แต่ละคอลัมน์ครอบครองหนึ่งส่วนของพื้นที่ที่เหลือ */
5
    grid-template-rows: repeat(3, 1fr);
6
    /* แบ่งแถวเป็น 3 ส่วนเท่าๆ กัน แต่ละแถวครอบครองหนึ่งส่วนของพื้นที่ที่เหลือ */
7
}
8
.item{
9
    margin: 10px;
10
    background-color: rgb(100, 150, 200);
11
}

1
    <div class="grid-example">
2
        <div class="item">สาธิต Grid</div>
3
        <div class="item">สาธิต Grid</div>
4
        <div class="item">สาธิต Grid</div>
5
        <div class="item">สาธิต Grid</div>
6
        <div class="item">สาธิต Grid</div>
7
        <div class="item">สาธิต Grid</div>
8
        <div class="item">สาธิต Grid</div>
9
        <div class="item">สาธิต Grid</div>
10
        <div class="item">สาธิต Grid</div>
11
    </div>

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: minmax(100px, 1fr) minmax(200px, 2fr);
4
    /* คอลัมน์แรกความกว้างต่ำสุด 100px, ครอบครองหนึ่งส่วนของพื้นที่ที่เหลือ; คอลัมน์ที่สองความกว้างต่ำสุด 200px, ครอบครองสองส่วนของพื้นที่ที่เหลือ */
5
    grid-template-rows: minmax(100px, 1fr) minmax(200px, 2fr);
6
    /* แถวแรกความสูงต่ำสุด 100px, ครอบครองหนึ่งส่วนของพื้นที่ที่เหลือ; แถวที่สองความสูงต่ำสุด 200px, ครอบครองสองส่วนของพื้นที่ที่เหลือ */
7
}
8
.item{
9
    margin: 10px;
10
    background-color: rgb(100, 150, 200);
11
}

1
    <div class="grid-example">
2
        <div class="item">สาธิต Grid</div>
3
        <div class="item">สาธิต Grid</div>
4
        <div class="item">สาธิต Grid</div>
5
        <div class="item">สาธิต Grid</div>
6
    </div>

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: 30% 30% 30%;
4
    grid-template-rows: 200px 200px;
5
    grid-row-gap: 50px; /* ช่องว่างระหว่างแถว 50px */
6
    grid-column-gap: 30px; /* ช่องว่างระหว่างคอลัมน์ 30px */
7
    /* gap: 50px 30px; ช่องว่างระหว่างแถว 50px, ช่องว่างระหว่างคอลัมน์ 30px */
8
}
9
.item{
10
    margin: 10px;
11
    background-color: rgb(100, 150, 200);
12
}

1
    <div class="grid-example">
2
        <div class="item">สาธิต Grid</div>
3
        <div class="item">สาธิต Grid</div>
4
        <div class="item">สาธิต Grid</div>
5
        <div class="item">สาธิต Grid</div>
6
        <div class="item">สาธิต Grid</div>
7
        <div class="item">สาธิต Grid</div>
8
    </div>

1
.example {
2
    display: grid;
3
    grid-template-columns: repeat(3, 1fr);
4
    /* กำหนด 3 คอลัมน์, แต่ละคอลัมน์ครอบครอง 1 ส่วนพื้นที่ */
5
    grid-template-rows: repeat(2, 150px);
6
    /* กำหนด 2 แถว, แต่ละแถวสูง 150px */
7
    gap: 10px;
8
    padding: 20px;
9
}
10
.item {
11
    background-color: #f2f2f2;
12
    padding: 20px;
13
    border: 1px solid #ddd;
14
    text-align: center;
15
}
16
/* การจัดวางโดยใช้ grid-column และ grid-row */
17
.item1 {
18
    grid-column: 1 / 3; /* จากคอลัมน์ที่ 1 ถึงคอลัมน์ที่ 3(1+2 คอลัมน์) */
19
    grid-row: 1 / 2;    /* จากแถวที่ 1 ถึงแถวที่ 2(1 แถว) */
20
}
21
/* การจัดวางโดยใช้ grid-area */
22
.item2 {
23
    grid-area: 2 / 2 / 3 / 4; /* จากแถวที่ 2 คอลัมน์ที่ 2 ถึงแถวที่ 3 คอลัมน์ที่ 4(2 แถว)(2+3 คอลัมน์) */
24
}

1
<div class="example">
2
    <div class="item item1">Item 1</div>
3
    <div class="item item2">Item 2</div>
4
    <div class="item">Item 3</div>
5
    <div class="item">Item 4</div>
6
    <div class="item">Item 5</div>
7
    <div class="item">Item 6</div>
8
</div>

1
body {
2
    margin: 0;
3
    padding: 0;
4
}
5

6
.container {
7
    display: grid;
8
    grid-template-columns: 1fr 2fr;
9
    /* กำหนดสองคอลัมน์, คอลัมน์แรกครอบครองหนึ่งส่วน, คอลัมน์ที่สองครอบครองสองส่วน */
10
    grid-template-rows: auto;
11
    /* กำหนดความสูงแถว, แถวแรกและแถวที่สามความสูงกำหนดโดยเนื้อหา, แถวที่สองครอบครองพื้นที่ที่เหลือ */
12
    grid-template-areas:
13
    "header header"
14
    "sidebar main"
15
    "footer footer";
16
    /* กำหนดเลย์เอาต์พื้นที่, แต่ละพื้นที่แสดงด้วยสตริง, ช่องว่างแยกเซลล์, ขึ้นบรรทัดใหม่แสดงแถวใหม่ */
17
    min-height: 100vh;
18
    /* ตั้งค่าความสูงต่ำสุด, รับประกันว่า footer จะมองเห็นได้แม้ความสูงเนื้อหาน้อยกว่าวิวพอร์ต */
19
}
20

21
.header {
22
    grid-area: header;
23
    /* วาง .header ในพื้นที่ชื่อ "header" */
24
    background-color: #333;
25
    color: #fff;
26
    padding: 10px;
27
}
28

29
.sidebar {
30
    grid-area: sidebar;
31
    /* วาง .sidebar ในพื้นที่ชื่อ "sidebar" */
32
    background-color: #f2f2f2;
33
    padding: 10px;
34
}
35

36
.main {
37
    grid-area: main;
38
    /* วาง .main ในพื้นที่ชื่อ "main" */
39
    padding: 10px;
40
}
41

42
.footer {
43
    grid-area: footer;
44
    /* วาง .footer ในพื้นที่ชื่อ "footer" */
45
    background-color: #333;
46
    color: #fff;
47
    padding: 10px;
48
}

1
    <div class="container">
2
        <div class="header">Header</div>
3
        <div class="sidebar">Sidebar</div>
4
        <div class="main">
5
          <h1>Main Content</h1>
6
          <p>This is the main content area.</p>
7
        </div>
8
        <div class="footer">Footer</div>
9
    </div>