Lưới hiện rõ (Explicit Grid)
Hệ thống Grid ngụ ý việc sử dụng lưới hiện rõ và lưới ngầm định. Hãy cùng phân tích những khái niệm này chi tiết hơn.
Lưới hiện rõ là một tập hợp các phần tử được sắp xếp theo cột và hàng. Thông thường, lưới hiện rõ được tạo thủ công và tất cả các grid mà chúng ta đã tạo cùng nhau trong các bài học trước đều là lưới hiện rõ (ví dụ, bài học ô lát trong grid).
Hãy tạo một bảng, đó sẽ là lưới hiện rõ của chúng ta:
<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: 1fr 1fr 1fr / 1fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
