Mga katangian ng CSS na may kaugnayan sa layout ng grid
Ang artikulong ito ay nagpapaliwanag ng mga katangian ng CSS na nauugnay sa layout ng grid.
Maaari mong matutunan kung paano ilarawan ang grid at inline grid.
YouTube Video
HTML para sa Preview
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>Layout ng Grid
grid
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}Ang grid ay isang sistema ng layout para sa pagkakahilera ng mga elemento sa dalawang-dimensional na mga hilera at kolum. Sa paggamit ng grid, mas madali at flexible mong mabubuo ang mga komplikadong layout na mahirap gawin gamit ang tradisyunal na mga pamamaraan tulad ng float o position. Bagaman mahusay ang flexbox sa isang-dimensional na mga layout, ang grid ay angkop para sa dalawang-dimensional na mga layout.
- Ang class na
grid-boxay gumagamit ng layout ng grid sa pamamagitan ng pagtukoy nggridsa katangian nadisplay. Ang elementong ito ay tinatawag na grid container. - Ang katangiang
grid-template-columnsay tumutukoy sa lapad ng mga kolum ng grid. Sa halimbawang ito, ang unang kolum ay 100px, ang pangalawang kolum ay 200px, at ang pangatlong kolum ay kumukuha ng natitirang espasyo (auto). - Ang katangiang
grid-template-rowsay tumutukoy sa taas ng mga hilera ng grid. Ang unang hilera ay 100px, ang pangalawang hilera ay awtomatikong (auto), at ang pangatlong hilera ay may taas na 50px. - Itinatakda ng katangiang
gapang espasyo sa pagitan ng mga elemento ng grid. Nagdadagdag ng 10px na espasyo sa pagitan ng mga kolum at hilera.
Pangunahing Terminolohiya
- Ang grid container ay isang elemento na may
displayna katangiang nakatakda sagrid, at ang mga anak na elemento nito ay nagiging mga elemento ng grid. - Ang mga elemento ng grid ay ang mga anak na elemetont inilagay nang direkta sa ilalim ng isang grid container.
Pangunahing mga katangian ng grid
grid-template-columns & grid-template-rows
1.container {
2 grid-template-columns: 1fr 2fr 1fr;
3}- Ang mga katangiang
grid-template-columnsatgrid-template-rowsay tumutukoy sa sukat ng bawat kolum at hilera. - Maaaring gamitin ang mga unit tulad ng
pxat%, pati na rin angfr(fraction) upang tukuyin ang proporsyon ng natitirang espasyo.- Sa halimbawang ito, may tatlong mga kolum, at ang pangalawang kolum ay doble ang lapad kumpara sa iba.
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}- Ang
grid-columnatgrid-roway tumutukoy kung saang kolum o hilera ilalagay ang item sa grid.- Sa halimbawang ito, ang item ay sumasaklaw mula sa ikalawang kolum hanggang sa ikaapat na kolum at mula sa unang hilera hanggang sa ikatlong hilera.
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}- Ang
grid-auto-rowsatgrid-auto-columnsay mga katangian na kumokontrol sa laki ng mga hilera at kolum na awtomatikong nililikha kapag ang mga linya ng layout o kolum ay hindi tahasang tinukoy.- Sa halimbawang ito, tahasang tinukoy ang 2 hilera at 2 kolum, ngunit kung magdadagdag ng higit pang mga elemento, ang mga bagong hilera o kolum ay awtomatikong malilikha ayon sa
grid-auto-rowsatgrid-auto-columns.
- Sa halimbawang ito, tahasang tinukoy ang 2 hilera at 2 kolum, ngunit kung magdadagdag ng higit pang mga elemento, ang mga bagong hilera o kolum ay awtomatikong malilikha ayon sa
justify-items & align-items
1.container {
2 justify-items: center; /* Center items horizontally */
3 align-items: center; /* Center items vertically */
4}- I-align ang mga item sa grid nang pahalang (
justify-items) at patayo (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}- Ang
grid-areaay nagsasaad kung aling bahagi ng grid container dapat ilagay ang grid item.- Sa halimbawang ito, nangangahulugan itong sumasakop mula sa unang hilera hanggang sa ikatlong hilera at mula sa ikalawang kolum hanggang sa ikaapat na kolum.
gap
1.container {
2 gap: 10px 20px; /* 10px space between rows, 20px space between columns */
3}- Ang
gapay nagdaragdag ng espasyo sa pagitan ng mga column at row. Maaari mo ring tukuyin ang espasyo sa pagitan ng mga column at row nang paisa-isa gamit angcolumn-gapatrow-gap.
grid-auto-flow
1.container {
2 grid-auto-flow: column; /* Add items in the column direction */
3}- Ang
grid-auto-floway isang katangian na nagtatakda ng direksyon kung saan inilalagay ang mga item, maaaring sa row o column.
Halimbawa ng mga masalimuot na layout.
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}Sa ganitong paraan, ang grid ay nagbibigay-daan sa iyo na lumikha ng isang buong layout ng webpage gamit ang simpleng code.
- Sa halimbawang ito, mayroong tatlong column (sidebar, main content, at advertisement) at tatlong row (header, content, at footer).
- Ang header at footer ay sumasakop sa buong lapad ng pahina, habang ang nilalaman ay nasa gitna, at ang sidebar at anunsyo ay nasa magkabilang panig.
Mga Bentahe ng Grids
Ang mga bentahe ng grid ay kinabibilangan ng mga sumusunod na puntos:.
- Madaling dalawang-dimensional na layout: Ang pamamahala sa layout sa parehong mga hilera at kolum ay nagbibigay-daan upang makamit kahit ang masalimuot na layout gamit ang mas kaunting code.
- Compatible sa responsive na disenyo: Ang grid system ay nagpapadali sa paggawa ng mga responsive na disenyo na umaakma sa iba't ibang laki ng screen.
Katangiang 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}Ang katangiang gap ay ginagamit sa mga grid layout at flexbox layout upang itakda ang espasyo (gaps) sa pagitan ng mga elemento. Gamit ang katangiang ito, madali mong mailalagay ang espasyo sa pagitan ng mga child element.
- Sa klase na
gap-grid-container, isang pagitan na30pxnang patayo at10pxnang pahalang ang itinakda sa pagitan ng bawat elemento. Dahil ang isang grid na may 3 kolum ay nilikha gamit anggrid-template-columns, ang mga pagitan ay inilalagay nang patayo at pahalang sa pagitan ng bawat elemento. Sa klase nagap-flex-container, isang pagitan na50pxang inilalagay sa pagitan ng tatlong item sa flexbox.
Pangunahing Syntax
1.container {
2 display: grid; /* or flex */
3 gap: <row-gap> <column-gap>;
4}- Ang
row-gapay tumutukoy sa pagitan sa pagitan ng mga hilera. Ito ang patayong espasyo sa mga layout ng grid o flex. - Ang
column-gapay tumutukoy sa pagitan sa pagitan ng mga kolum. Ito ang pahalang na espasyo.
Kung hindi tinukoy ang dalawang halaga, isang halaga ang ilalapat sa parehong row-gap at column-gap.
Mga benepisyo ng gap na katangian
Kasama sa mga benepisyo ng gap na katangian ang mga sumusunod:.
- Simpleng pagtukoy ng gap: Ang code para tukuyin ang pagitan sa pagitan ng mga child na elemento ay nagiging mas simple, inaalis ang pangangailangan para magtakda ng dagdag na margin o padding sa pagitan ng mga elemento.
- Madaling pag-angkop: Madali itong sumusuporta sa tumutugon na disenyo, na nagpapahintulot ng nababagong mga ayos sa disenyo.
Katangian ng 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}Ang katangian na grid-template-areas ay nagbibigay ng paraan upang pangalanan ang mga lugar sa loob ng isang grid container at gamitin ang mga pangalang iyon upang madaling iposisyon ang mga elemento ng grid. Ang paggamit ng katangiang ito ay nagbibigay-daan sa mga layout na madaling maunawaan sa paningin.
Ang mga elementong naka-posisyon sa mga pinangalanang lugar na tinukoy ng grid-template-areas na katangian ay dapat may kaparehong pangalan na itinalaga gamit ang grid-area na katangian. Kahit na ang mga elemento ay sumasakop sa maraming selula, awtomatiko silang naka-posisyon nang tama.
Sa halimbawang ito, ang grid ay nalikha tulad ng sumusunod:.
- Sa unang hilera, ang "header" ay inilagay sa dalawang kolum.
- Ang "Sidebar" ay inilagay sa kaliwa at ang "content" sa kanan sa pangalawang hilera.
- Ang "Footer" ay inilagay sa dalawang kolum sa pangatlong hilera.
Pangunahing Paggamit
1grid-template-areas:
2 "area1 area2 area3"
3 "area1 area4 area5";Sa katangiang grid-template-areas, tinukoy ang pangalan ng lugar para sa bawat hilera. Sa pamamagitan ng paglalagay ng mga elemento sa mga rehiyong may itinalagang mga pangalan, maaari kang madaling lumikha ng mga layout.
- Sa halimbawang ito, isang grid na may 2 hilera at 3 kolum ang nilikha, at ang bawat selula ay pinangalanang area1, area2, at iba pa.
Pagtukoy ng mga walang laman na selda gamit ang .
1grid-template-areas:
2 "header header header"
3 "sidebar . content"
4 "footer footer footer";Kung nais mong magkaroon ng mga walang laman na selda sa iyong layout, maaari mong gamitin ang isang . (tuldok) upang kumatawan sa mga walang laman na selda.
- Tulad ng sa halimbawang ito, sa pamamagitan ng pagtukoy ng isang . sa pagitan ng sidebar at content, magiging blangko ang ikalawang kolum.
Mga Bentahe ng Ari-arian na grid-template-areas
Ang mga bentahe ng ari-arian na grid-template-areas ay kasama ang mga sumusunod na punto.
- Visual layout: Pinapahintulutan kang ipahayag ang layout sa paraang visual, na nagpapadali ng pag-unawa sa disenyo.
- Madaling paglipat ng elemento: Madali mong mai-aayos ang layout ng mga elemento sa pamamagitan ng pagbabago ng mga kahulugan ng lugar sa CSS nang hindi kinakailangang baguhin ang HTML.
Mga Tala
Kapag ginagamit ang ari-arian na grid-template-areas, mahalagang bigyan ng pansin ang mga sumusunod na punto.
- Ang bilang ng mga pangalan sa bawat hanay ay dapat tumutugma sa bilang ng tinukoy na mga kolum.
- Ang pagtatalaga ng parehong pangalan sa maraming selda ay pagsasamahin ang mga ito, ngunit kapag itinatalaga sa iba't ibang hanay o kolum, ang lugar ay dapat hugis parisukat.
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}Ang inline-grid ay isa sa mga halaga para sa ari-arian na display sa CSS. Ang paggamit ng ari-arian na ito ay gumagawa ng elemento bilang isang inline-level container, na lumilikha ng grid formatting context sa loob. Hindi tulad ng display: grid, ito ay kumikilos bilang isang inline na elemento sa daloy ng dokumento.
Mga Gamit ng inline-grid
Ang inline-grid ay hindi kasing-karaniwan tulad ng grid, ngunit maaaring mabisang magamit sa mga partikular na sitwasyon.
-
Grid sa loob ng konteksto ng inline: Kapaki-pakinabang kapag gusto mong maglagay ng grid sa tabi ng nilalaman ng teksto o iba pang mga inline na elemento. Halimbawa, ito ay kapaki-pakinabang kapag kailangan ng grid structure para sa mga button, badge, label, atbp., ngunit gusto mong ipakita ito bilang inline nang hindi naaapektuhan ang daloy ng teksto.
-
Kontrol ng layout sa loob ng mga inline na elemento: Kahit na kinakailangan ang komplikadong mga layout sa loob ng mga inline na elemento tulad ng mga link, button, o span, kayang pamahalaan ng
inline-gridang internal na istruktura gamit ang grid layout habang iniiwasan ang block na display.
1<button class="inline-grid">
2 <span>Icon</span>
3 <span>Text</span>
4</button>Sa kasong ito, ipinapakita ng button ang icons at teksto sa isang grid, habang nananatiling inline sa daloy ng dokumento.
- Mga responsive na inline na bahagi: Ang
inline-griday maaaring gamitin para sa maliliit na bahagi na bahagi ng inline na nilalaman at nangangailangan ng grid layout. Halimbawa, angkop ito para sa mga inline na form, badge, label ng produkto, atbp., kung saan nais mong ayusin ang layout gamit ang grid habang nananatiling inline.
Pag-align at pagsukat ng inline-grid
1.inline-grid {
2 display: inline-grid;
3 vertical-align: middle;
4}- Tulad ng iba pang mga inline na elemento, ang
inline-griday sumusunod sa vertical na pag-align kaugnay sa nakapaligid na nilalaman. Maaari mong kontrolin ang pag-align ng grid gamit ang ari-arian navertical-align.
1.inline-grid {
2 display: inline-grid;
3 width: 200px;
4 height: 100px;
5}- Tungkol sa laki, ang isang
inline-gridna elemento ay sumasakop lamang sa lapad na kinakailangan ng nilalaman ng grid nito. Kung kinakailangan, maaari mong malinaw na itakda ang lapad, taas, at minimum/maksimum na mga sukat.
1.inline-grid {
2 display: inline-grid;
3 grid-template-columns: auto 1fr;
4}Posible rin na ang layout ng grid mismo ang magtakda ng laki ng inline-grid na lalagyan, at ang tendensiyang ito ay mas malakas kapag gumagamit ng nababaluktot na mga unit tulad ng fr, auto, at porsyento.
Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.