Bố cục lưới ô trong CSS
Hãy chuyển sang thực hành với hệ thống lưới và tạo các ô có khoảng cách khác nhau.
Bố cục 9 khối, 3 khối một hàng không có khoảng cách
Hãy tạo một bảng chín phần tử và sắp xếp chúng thành ba cột:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
height: 100px;
padding: 10px;
border: 1px solid #696989;
}
:
Bố cục 9 khối, 3 khối một hàng có khoảng cách
Bây giờ hãy áp dụng thuộc tính grid-gap
để tạo khoảng cách giữa
các phần tử:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
height: 100px;
padding: 10px;
border: 1px solid #696989;
}
:
Bố cục 9 khối, 3 khối một hàng chỉ có khoảng cách giữa các khối
Bây giờ hãy đặt khoảng cách chỉ giữa các khối trong lưới:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
border: 2px solid #696989;
width: 600px;
}
#parent > div {
height: 100px;
padding: 10px;
border: 1px solid #696989;
}
:
Bố cục 8 khối, 3 khối một hàng với một khối bị thiếu
Hãy tạo một bố cục ô, trong đó hàng dưới cùng sẽ thiếu một khối:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
border: 2px solid #696989;
width: 600px;
}
#parent > div {
height: 100px;
padding: 10px;
border: 1px solid #696989;
}
:
Bài tập thực hành
Thực hiện ví dụ sau:
Thực hiện ví dụ sau:
Thực hiện ví dụ sau:
