Người Viết : ViKiMi Editor

5. CSS Grid Item
Các phần tử con của Grid Container (Items)
Một Grid container sẽ chứa nhiều phần tử items của grid.
Mặc định, một container sẽ có quy tắc mặc định là mỗi phần tử item sẽ thuộc 1 hàng 1 cột (Nghĩa là 1 item sẽ được định vị trí theo cách (hàng a, cộtb)).
Nhưng bạn có thể tự thực hiện kiểu định vị vị trí cho các phần tử, Các phần tử có thể được kéo dài trên nhiều hàng và/(hoặc) nhiều cột.
VD : item 1 kéo dài từ hàng 2 đến hàng 4 và kéo dài từ cột 1 đến cột 3.
5.1 Thuộc tính grid-column:
Thuộc tính grid-column xác định các cột sẽ dùng cho việc đặt phần tử con item.
Bạn sẽ xác định cột mà item sẽ bắt đầu, và cột mà item sẽ kết thúc.
Lưu ý: Thuộc tính grid-column là thuộc tính shorthand của grid-column-start và the grid-column-end

Để đặt 1 item, bạn có thể refer số line, hoặc sử dụng từ khoá “span” để xác định số cột item sẽ kéo dài.
Hiển thị với grid-column: 1 / 3 ;
.grid-PTCha-grid-column {
display: grid;
grid-template-columns: auto auto auto auto auto auto;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-PTCha-grid-column > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item1-grid-column {
grid-column: 1 / 3;
}
Sử dụng thuộc tính <em> grid-column </em> để chỉ định vị trí của item.
Item1 sẽ bắt đầu từ cột 1 và sẽ kết thúc trước cột 3:
<div class=”grid-PTCha-grid-column”>
<div class=”item1-grid-column”>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 class=”item9″>9</div>
<div class=”item10″>10</div>
</div>
Kết quả hiển thị là :

Example
Thực hiện ‘Item 1’ bắt đầu trên cột 1 và kéo dài 4 cột: grid-column: 1 / span 4;
.grid-PTCha-grid-column {
display: grid;
grid-template-columns: auto auto auto auto auto auto;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-PTCha-grid-column > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item1-grid-column-span {
grid-column: 1 / span 4;
}
Sử dụng thuộc tính grid-column để xác định vị trí đặt item.
<div class=”grid-PTCha-grid-column”>
<div class=”item1-grid-column-span”>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 class=”item9″>9</div>
<div class=”item10″>10</div>
</div>
Kết quả hiển thị :

5.2 Thuộc tính grid-row
Thuộc tính grid-row xác định các hàng sẽ dùng cho việc đặt phần tử con item.
Bạn sẽ xác định hàng mà item sẽ bắt đầu, và hàng mà item sẽ kết thúc.
Lưu ý: Thuộc tính grid-row là thuộc tính shorthand của grid-row-start và grid-row-end.
Để đặt 1 item, bạn có thể refer số line, hoặc sử dụng từ khoá “span” để xác định số cột item sẽ kéo dài.
.grid-PTCha-grid-row {
display: grid;
grid-template-columns: auto auto;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-PTCha-grid-row > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item1-grid-row {
grid-row: 1 / 4;
}
Thuộc tính grid-row
Sử dụng grid-row để xác định vị trí hàng mà item được đặt.
Item1 sẽ được đặt từ row line 1 đến row line 4:
<div class=”grid-PTCha-grid-row”>
<div class=”item1-grid-row”>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 class=”item9″>9</div>
<div class=”item10″>10</div>
</div>

Example
Item1 bắt đầu trên hàng 1 và kéo dài 4 hàng
.grid-PTCha-grid-row {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-PTCha-grid-row > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item1-grid-row-span {
grid-row: 1 / span 4;
}
Thuộc tính grid-row
Sử dụng thuộc tính grid-row để chỉ định vị trí đặt item.
<div class=”grid-PTCha-grid-row”>
<div class=”item1-grid-row-span”>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 class=”item9″>9</div>
<div class=”item10″>10</div>
<div class=”item11″>11</div>
<div class=”item12″>12</div>
</div>
Kết quả hiển thị :

5.3 Thuộc tính grid-area
The grid-area property can be used as a shorthand property for the grid-row-start, grid-column-start, grid-row-end and the grid-column-end properties.
Thuộc tính grid-area có thể được sử dụng như thuộc tính shorthand cho các thuộc tính grid-row-start, grid-column-start, grid-row-end và grid-column-end

Example
Đặt phần từ item2 bắt đầu tại row-line 1 và column-line 2, và kết thúc tại row-line 2 và column line 5:
.grid-PTCha-grid-area {
display: grid;
grid-template-columns: auto auto auto auto auto;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-PTCha-grid-area > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item2-grid-area {
grid-area: 1 / 2 / 2 / 5;
}
Thuộc tính grid-area
Cú pháp thuộc tính grid-area:
grid-row-start / grid-column-start / grid-row-end / grid-column-end.
<div class=”grid-PTCha-grid-area”>
<div class=”item1″>1</div>
<div class=”item2-grid-area”>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 class=”item9″>9</div>
<div class=”item10″>10</div>
<div class=”item11″>11</div>
<div class=”item12″>12</div>
<div class=”item13″>13</div>
<div class=”item14″>14</div>
<div class=”item15″>15</div>
</div>
Kết quả hiển thị :

Example 2
.grid-PTCha-grid-area {
display: grid;
grid-template-columns: auto auto auto auto auto;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-PTCha-grid-area > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item2-grid-area-span {
grid-area: 2 / 1 / span 2 / span 3;
}
Thuộc tính grid-area với span
Cú pháp của thuộc tính grid-area là grid-row-start / grid-column-start / grid-row-end / grid-column-end.
Item2 sẽ bắt đầu trên row-line 2 và column-line 1, và kéo dài trên 2 hàng và kéo dài trên 3 cột:
<div class=”grid-PTCha-grid-area”>
<div class=”item1″>1</div>
<div class=”item2-grid-area-span”>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 class=”item9″>9</div>
<div class=”item10″>10</div>
</div>
Kết quả hiển thị :

5.4 Đặt tên cho các phần tử Grid Items
Thuộc tính grid-area có thể còn được sử dụng để gán tên cho các phần tử của grid.
Tên của các phần tử grid items có thể được tham chiếu bởi thuộc tính grid-template-areas của phần tử cha grid-container

Example
Item1 có tên “MyArea” và kéo dài tất cả 4 cột trong 4 cột của grid layout:
.item2-naming-item {
grid-area: myArea;
}
.grid-PTCha-grid-area-naming {
display: grid;
grid-template-areas: ‘. myArea myArea myArea myArea’ ‘. myArea myArea myArea myArea’;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-PTCha-grid-area-naming > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
Thuộc tính grid-area
Bạn có thể sử dụng thuộc tính <em>grid-area</em> để đặt tên cho các grid items.
Bạn có thể tham chiếu tên cho các items khi bạn thiết lập grid layout, bằng cách sử dụng thuộc tính grid-template-areas trên phẩn tử cha grid container.
Item2 được gọi tên là “myArea” và sẽ được đặt tại 4 cột.
Mỗi hàng được xác định bằng dấu nháy đơn (‘ ‘)
Các cột dùng để hiển thị cho phần tử item được đặt tên ‘myAreas’ nằm trên 1 hàng được xác định bên trong dấu nháy đơn (‘. myArea myArea myArea myArea’), được phân tách bằng dấu cách.
Nếu phần tử item được đặt tên ‘myArea’ sẽ được hiển thị trên nhiều hàng và mỗi hàng sẽ hiển thị tại các cột đã được đặt xác định tương ứng thì sẽ có cấu trúc như sau :
grid-template-areas: ‘. myArea myArea myArea myArea’ ‘. myArea myArea myArea myArea’;
Với định nghĩa này thì phần tử số 2 ( có class=”item2-naming-item”) sẽ hiển thị trên 2 hàng và bắt đầu từ column-line 2 đến column-line 6.
(Tại vì mỗi một giá trị là ‘myArea’ thì sẽ được xác định đặt tại vị trí tương ứng là (1 hàng, 1 cột) nên phần tử phần tử số 2 sẽ được đặt trên 4 cột và trên 2 hàng, mà số của column line sẽ được tính trên số cột hiển thị)
Chú ý (dấu chấm biểu thị các mục không có tên):
<div class=”grid-PTCha-grid-area-naming”>
<div class=”item1-naming-grid-column”>1</div>
<div class=”item2-naming-item”>2</div>
<div class=”item3-naming”>3</div>
<div class=”item4-naming”>4</div>
<div class=”item5-naming”>5</div>
<div class=”item6-naming”>6</div>
<div class=”item7-naming”>7</div>
<div class=”item8-naming”>8</div>
<div class=”item9-naming”>9</div>
<div class=”item10-naming”>10</div>
<div class=”item11-naming”>11</div>
<div class=”item12-naming”>12</div>
</div>
Kết quả hiển thị :

5.4.1 Ví Dụ Đặt tên cho mẫu template dùng cho webpage.
Ví Dụ :
Đặt tên cho tất cả các items sẽ hiển thị cho webpage:
.item1-webpage-template { grid-area: header; }
.item2-webpage-template { grid-area: menu; }
.item3-webpage-template { grid-area: main; }
.item4-webpage-template { grid-area: right; }
.item5-webpage-template { grid-area: footer; }
.grid-PTCha-webpage-template {
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-PTCha-webpage-template > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
Thuộc tính grid-area
Bạn có thể dùng grid-area để đặt tên cho các phần tử của grid.
Bạn có thể tham chiếu đặt tên khi thiết lập grid layout. Bạn dùng grid-template-areas trên grid container.
Bên dưới là grid layout chứa 6 cột và 3 hàng:
<div class=”grid-PTCha-webpage-template”>
<div class=”item1-webpage-template”>
Header</div>
<div class=”item2-webpage-template”>
Menu</div>
<div class=”item3-webpage-template”>
Main</div>
<div class=”item4-webpage-template”>
Right</div>
<div class=”item5-webpage-template”>
Footer</div>
</div>

5.4.2 The Order of the Items
Với Grid layout sẽ cho phép bạn đặt các phần tử nơi nào bạn muốn.
Phần tử đầu tiên trong mã HTML không nhất thiết phải xuất hiện
dưới dạng phần tử đầu tiên trong lưới.
.grid-PTCha-Order-Items {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-PTCha-Order-Items > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item1-Order-Items { grid-area: 1 / 3 / 2 / 4; }
.item2-Order-Items { grid-area: 2 / 3 / 3 / 4; }
.item3-Order-Items { grid-area: 1 / 1 / 2 / 2; }
.item4-Order-Items { grid-area: 1 / 2 / 2 / 3; }
.item5-Order-Items { grid-area: 2 / 1 / 3 / 2; }
.item6-Order-Items { grid-area: 2 / 2 / 3 / 3; }
Sắp xếp các phần tử:
Các phần tử items không nhất thiết phải được hiển thị theo thứ tự giống như chúng được viết bằng mã HTML.
<div class=”grid-PTCha-Order-Items”>
<div class=”item1-Order-Items”>
1</div>
<div class=”item2-Order-Items”>
2</div>
<div class=”item3-Order-Items”>
3</div>
<div class=”item4-Order-Items”>
4</div>
<div class=”item5-Order-Items”>
5</div>
<div class=”item6-Order-Items”>
6</div>
</div>
Kết quả hiển thị :

5.4.3 Sắp xếp lại các Items
Với Grid layout bạn cũng có thể thực hiện sắp xếp lại các phần tử theo ý muốn đối với các màn hình thiết bị khác nhau. Và sử dụng @media query
.grid-PTCha-media-queries {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-PTCha-media-queries > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
@media only screen and (max-width: 500px) {
.item1-media-queries
{ grid-area: 1 / span 3 / 2 / 4; }
.item2-media-queries
{ grid-area: 3 / 3 / 4 / 4; }
.item3-media-queries
{ grid-area: 2 / 1 / 3 / 2; }
.item4-media-queries
{ grid-area: 2 / 2 / span 2 / 3; }
.item5-media-queries
{ grid-area: 3 / 1 / 4 / 2; }
.item6-media-queries
{ grid-area: 2 / 3 / 3 / 4; }
}
Với truy vấn @media ở trên thì khi gặp màn hình có kích cớ lớn nhất tối đa 500px thì các phần tử sẽ được sắp xếp lại với cấu trúc trong khối @media only screen and (max-width: 500px) { ….. }
<div class=”grid-PTCha-media-queries”>
<div class=”item1-media-queries”>
1</div>
<div class=”item2-media-queries”>
2</div>
<div class=”item3-media-queries”>
3</div>
<div class=”item4-media-queries”>
4</div>
<div class=”item5-media-queries”>
5</div>
<div class=”item6-media-queries”>
6</div>
</div>
Kết quả như sau :
1 – Với màn hình thông thường như máy
tính desktop

2 – Với màn hình có độ rộng tối đa là 500px


Qua chuỗi bài về Grid layout mong rằng bạn sẽ hiểu hơn về cách sắp xếp của grid layout dành cho các phần tử. Hãy thực hiện để hiển thị bố cục tốt nhất. Và có thể áp dụng nhiều màn hình hiển thị với các định nghĩa của grid layout.
Trong chuỗi bài tiếp, Chúng ta sẽ tìm hiểu hiển thị Responsive website với bootstrap với các hiển thị bố cục rõ hơn.