Người Viết : ViKiMi Editor

Hướng dẫn cách tạo Grid Layout

Lập trình website với Grid Layout luôn đem lại sự thuận tiện. Với nhiều tuỳ chỉnh và nhiều thuộc tính. Hiện nay để thể hiện tính Response cho website. Việc chọn lựa Grid Layout khá phổ biến. Với nhiều thiết bị hiển thị như máy tính, mobile, table phone, máy tính bảng, máy đọc báo… hiển thị Grid Layout đem lại sự đa phương tiện hiển thị. Bên cạnh đó cách chọn cổ điển theo căn lề trái (Căn chỉnh sang bên trái) cũng được trọn. Hoặc các tiện ích như bootstrap cũng được ưu tiên… Để chuẩn bị cao hơn, bài học này sẽ là bước đệm tốt.
Ví dụ 1 về GridLayout
Các items của Grid Layout
Một Grid Layout phải có một Parent là phần tử cha ở ví dụ dưới là PT-cha được thiết lập thuộc tính CSS display là gridhoặc inline-grid (để tạo một khung cha là inline-grid).
Các Items con của phần tử cha (parent grid) sẽ tự động thành các phần tử của lưới.
Các phần tử sẽ được sắp sếp theo đúng CSS được tạo.
Các thuộc tính CSS
display: grid;
grid-template-columns: auto auto auto;
Thấy rằng thuộc tính display:grid được định nghĩa cho phần tử cha (grid-PTCha) có nghĩa là giao diện cho khung phần tử cha(grid-PTCha) sẽ là dạng lưới grid và thuộc tính grid-template-columns: auto auto auto; chũng được định nghĩa cho phần tử cha (grid-PTCha) có nghĩa là các phần tử sẽ được đặt vào khung phần tử Cha theo từng row (từng hàng) lần lượt các phần tử con từ phần tử 1 đến phần tử 9; lưu ý các phần tử sẽ chỉ được đặt vào từng row và giới hạn số cột cho từng row là 3 cột tương ứng với lệnh đưa ra gồm grid-template-columns : auto auto auto
Các bạn lưu ý: Chúng ta thấy có class PTCon-01-Hide vì phần ví dụ này chưa định vị vị trí cho Item 1. Tại ví dụ tiếp phần tử Item 1 sẽ được định vị cụ thể trên lưới Grid.
Kết quả của ví dụ 1:

Ta có CSS của ví dụ 1:
.grid-PTCha {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-PTCon {
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;
}
<div class=”grid-PTCha”>
<div class=”grid-PTCon PTCon-01-Hide”>Item 1</div>
<div class=”grid-PTCon”>Item 2</div>
<div class=”grid-PTCon”>Item 3</div>
<div class=”grid-PTCon”>Item 4</div>
<div class=”grid-PTCon”>Item 5</div>
<div class=”grid-PTCon”>Item 6</div>
<div class=”grid-PTCon”>Item 7</div>
<div class=”grid-PTCon”>Item 8</div>
<div class=”grid-PTCon”>Item 9</div>
</div>
Ví dụ 2 về GridLayout
Thuộc tính CSS grid-auto-flow: column giúp các phần tử con PTCon sẽ được đưa vào lưới Grid lần lượt theo các cột, số cột sẽ không giới hạn. Các PTCon sẽ sắp xếp đến khi hết. Chú ý rằng vì các phần tử được sắp xếp vào lưới theo cột nên gần như bắt buộc phải giới hạn số row sẽ có(Tức là sẽ giới hạn số hàng grid-template-rows: auto auto auto [ở đây có 3 hàng thôi nhé] ;). Ta hiểu rằng số cột là không giới hạn.
Thuộc tính grid-auto-flow giúp đặt các phần tử một cách tự động vào trong lưới giao diện (Grid layout), các phần tử con PTCon sẽ được đưa vào tự động lần lượt theo cột (Column) hoặc lần lượt theo hàng (Row). Việc sắp xếp này do thuộc tính sẽ được thiết lập theo các Trường Hợp :
Trường Hợp 1 (Theo Cột – Column): grid-auto-flow: column;
Trường Hợp 2 (Theo Hàng – Row): grid-auto-flow: row;
Grid ở dưới có số Column không giới hạn – (Do thuộc tính thiết lập grid-auto-flow: column) và có 3 hàng – (Do thuộc tính thiết lập trong style CSS là grid-template-rows: auto auto auto [Với thuộc tính này thì khuôn mẫu của Grid chỉ có 3 row thôi – tương ứng với auto auto auto. Nếu bạn muốn thiết lập 4 row thì sẽ là grid-template-rows: auto auto auto auto ])
grid-auto-flow: column
Thêm các phần tử vào Grid theo lần lượt các cột bắt đầu từ cột số 0 (Cột đầu tiên):
Kết quả của ví dụ 2:

Ta có CSS của ví dụ 2: (với css inline thì có khai báo style=”grid-auto-flow: column;” )
.grid-PTCha {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-PTCha > div.PTCon{
background-color: rgba(121 249 113 / 80%);
text-align: center;
padding: 20px 0;
font-size: 30px;
style=”grid-auto-flow: column;”style=”grid-auto-flow: column;”}
<div class=”grid-PTCha” style=”grid-auto-flow: column;”>
<div class=”PTCon”>1</div>
<div class=”PTCon”>2</div>
<div class=”PTCon”>3</div>
<div class=”PTCon”>4</div>
<div class=”PTCon”>1</div>
<div class=”PTCon”>2</div>
<div class=”PTCon”>3</div>
<div class=”PTCon”>4</div>
<div class=”PTCon”>1</div>
<div class=”PTCon”>2</div>
<div class=”PTCon”>3</div>
<div class=”PTCon”>4</div>
<div class=”PTCon”>1</div>
<div class=”PTCon”>2</div>
<div class=”PTCon”>3</div>
<div class=”PTCon”>4</div>
</div>
Ví dụ 3 về GridLayout
Thuộc tính CSS grid-auto-flow: row giúp các phần tử con PTCon sẽ được đưa vào lưới Grid lần lượt theo các hàng, số hàng sẽ không giới hạn. Các PTCon sẽ sắp xếp đến khi hết. Chú ý rằng vì các phần tử được sắp xếp vào lưới theo hàng nên gần như bắt buộc phải giới hạn số column sẽ có(Tức là sẽ giới hạn số cột grid-template-columns: auto auto auto [ở đây có 3 cột thôi nhé];). Ta hiểu rằng số hàng là không giới hạn.
Grid ở dưới có số Rows không giới hạn – (Do thuộc tính thiết lập grid-auto-flow: row) và có 3 cột – (Do thuộc tính thiết lập trong style CSS là grid-template-columns: auto auto auto [Với thuộc tính này thì khuôn mẫu của Grid chỉ có 3 cột thôi – tương ứng với auto auto auto. Nếu bạn muốn thiết lập 4 cột thì sẽ là grid-template-columns: auto auto auto auto ])
grid-auto-flow: row
Thêm các phần tử vào Grid theo lần lượt các hàng bắt đầu từ hàng số 0 (Hàng đầu tiên):
Kết quả của ví dụ 3:

Ta có CSS của ví dụ 3: (với css inline thì có khai báo style=”grid-auto-flow: row;“ )
.grid-PTCha {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-PTCha > div.PTCon{
background-color: rgba(121 249 113 / 80%);
text-align: center;
padding: 20px 0;
font-size: 30px;
style=”grid-auto-flow: column;”style=”grid-auto-flow: column;”}
<div class=”grid-PTCha” style=”grid-auto-flow: row;”>
<div class=”PTCon”>1</div>
<div class=”PTCon”>2</div>
<div class=”PTCon”>3</div>
<div class=”PTCon”>4</div>
<div class=”PTCon”>1</div>
<div class=”PTCon”>2</div>
<div class=”PTCon”>3</div>
<div class=”PTCon”>4</div>
</div>
Ví dụ 4 về GridLayout
Các items của Grid Layout với thuộc tính grid-column và grid-row
Với phần tử Con Item 1 chúng ta định nghĩa CSS là:
.PTCon-01 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
}
Với đoạn CSS trên ta có phần tử Con Item 1 sẽ được bắt đầu từ row số 1 đến row số 3; và bắt đầu từ column số 1 đến column số 3.
Các phần tử Con còn lại của lươi Grid layout sẽ được sắp xếp vào khung class .grid-PTCha lần lượt theo thứ tự lần lượt lưới theo tuần tự các row
Kết quả của ví dụ 4:

Ta có CSS của ví dụ 4:
.PTCon-01 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
}
.grid-PTCha {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-PTCha > div.PTCon{
background-color: rgba(121 249 113 / 80%);
text-align: center;
padding: 20px 0;
font-size: 30px;
style=”grid-auto-flow: column;”style=”grid-auto-flow: column;”}
<div class=”grid-PTCha”>
<div class=”grid-PTCon PTCon-01″>Item 1</div>
<div class=”grid-PTCon”>Item 2</div>
<div class=”grid-PTCon”>Item 3</div>
<div class=”grid-PTCon”>Item 4</div>
<div class=”grid-PTCon”>Item 5</div>
<div class=”grid-PTCon”>Item 6</div>
<div class=”grid-PTCon”>Item 7</div>
<div class=”grid-PTCon”>Item 8</div>
<div class=”grid-PTCon”>Item 9</div>
</div>
Part 1 : Gridlayout
Chúc bạn mau chóng thành công!