Làm thế nào để tạo lưới / Ngói xem?

129

Ví dụ, tôi có một số lớp .article và tôi muốn xem lớp này dưới dạng lưới. Vì vậy, tôi đã áp dụng phong cách này:

.article{
  width:100px;
  height:100px;
  background:#333;
  float:left;
  margin:5px;
}

Phong cách đó sẽ làm cho .article trông lát gạch / lưới. Nó hoạt động tốt với chiều cao cố định. Nhưng nếu tôi muốn đặt chiều cao thành tự động (tự động kéo dài theo dữ liệu bên trong nó), lưới sẽ trông khó chịu.

nhập mô tả hình ảnh ở đây

Và tôi muốn làm cho quan điểm như thế này:

nhập mô tả hình ảnh ở đây

— Ariona Rian
nguồn

78

Kiểu bố trí này được gọi là bố trí Masonry . Masonry là một bố cục lưới khác nhưng nó sẽ điền vào khoảng trắng gây ra bởi chiều cao khác nhau của các phần tử.

jQuery Masonry là một trong những plugin jQuery để tạo bố cục nề.

Ngoài ra, bạn có thể sử dụng CSS3 column. Nhưng hiện tại, plugin dựa trên jQuery là lựa chọn tốt nhất vì có vấn đề tương thích với cột CSS3.

— bookcasey
nguồn

3

Đã thêm cách CSS3 ở đây !

— Behradkhodayar

27

Bạn có thể sử dụng flexbox.

Đặt các yếu tố của bạn trong một thùng chứa cột đa dòng
```
#flex-container {
  display: flex;
  flex-flow: column wrap;
}
```

Sắp xếp lại các phần tử, để thứ tự DOM được tôn trọng theo chiều ngang thay vì theo chiều dọc. Ví dụ: nếu bạn muốn 3 cột,

#flex-container > :nth-child(3n + 1) { order: 1; } /* 1st column */
#flex-container > :nth-child(3n + 2) { order: 2; } /* 2nd column */
#flex-container > :nth-child(3n + 3) { order: 3; } /* 3rd column */

Buộc ngắt cột trước mục đầu tiên của mỗi cột:
```
#flex-container > :nth-child(-n + 3) {
  page-break-before: always; /* CSS 2.1 syntax */
  break-before: always;  /* New syntax */
}
```
Đáng buồn thay, không phải tất cả các trình duyệt hỗ trợ ngắt dòng trong flexbox. Nó hoạt động trên Firefox, mặc dù.

Hiển thị đoạn mã

#flex-container {
  display: flex;
  flex-flow: column wrap;
}

#flex-container > :nth-child(3n + 1) { order: 1; } /* 1st column */
#flex-container > :nth-child(3n + 2) { order: 2; } /* 2nd column */
#flex-container > :nth-child(3n + 3) { order: 3; } /* 3rd column */

#flex-container > :nth-child(-n + 3) {
  page-break-before: always; /* CSS 2.1 syntax */
  break-before: always;  /* New syntax */
}

/* The following is optional */
#flex-container > div {
  background: #666;
  color: #fff;
  margin: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 36px;
}
#flex-container > :nth-child(1) { height: 100px; }
#flex-container > :nth-child(2) { height: 50px; }
#flex-container > :nth-child(3) { height: 75px; }
#flex-container > :nth-child(4) { height: 50px; }
#flex-container > :nth-child(5) { height: 100px; }
#flex-container > :nth-child(6) { height: 50px; }
#flex-container > :nth-child(7) { height: 100px; }
#flex-container > :nth-child(8) { height: 75px; }
#flex-container > :nth-child(9) { height: 125px; }

<div id="flex-container">
  <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>

Mở rộng đoạn trích

— Oriol
nguồn

Wow, đây là một câu hỏi cũ. Và sử dụng flexbox để mô phỏng bố cục nề không phải là lựa chọn tốt nhất. Đoạn trích của bạn không hoạt động theo cách này: D, tôi nghĩ rằng bạn bỏ lỡ điểm ở đây. Cách giải quyết khác để giải quyết vấn đề này là sử dụng các cột CSS3. nhưng, cảm ơn vì câu trả lời

— Ariona Rian

1

@ArionaRian Hãy thử đoạn trích trên Firefox, các trình duyệt khác chưa hỗ trợ ngắt dòng bắt buộc. Và vâng, các cột CSS cũng có thể hoạt động, nhưng không giống như flexbox có vẻ được thiết kế cho văn bản hơn là bố cục.

— Oriol

Vâng, đó là vấn đề :), đó là lý do tại sao cho đến tận bây giờ, chúng tôi vẫn gắn bó với plugin masonry / isotope để đưa ra loại thiết kế này.

— Ariona Rian

Chỉ cần đặt màn hình: flex; flex-quấn: bọc; (và không có gì nữa) trên container và nó hoạt động hoàn hảo trong Chrome, Firefox, Safari, IE11 trên Win11 và Win7. Tuy nhiên, hãy cẩn thận với chiều cao tối thiểu (xem caniuse.com/#search=flex-wrap )

— LBJ

@LBJ Nhưng sau đó các phần tử được sắp xếp theo hàng. Đó không phải là hành vi mong muốn ở đây

— Oriol

11

Giờ đây, CSS3 đã có sẵn rộng rãi & tương thích thông qua các trình duyệt chính, đã đến lúc một giải pháp thuần túy được trang bị công cụ đoạn mã của SO:

Để tạo bố cục nề bằng CSS3, column-countcùng với column-gapđó là đủ. Nhưng tôi cũng đã sử dụng media-queriesđể làm cho nó phản ứng nhanh.

Trước khi đi sâu vào triển khai, vui lòng xem xét rằng sẽ an toàn hơn nhiều khi thêm dự phòng thư viện jQuery Masonry để làm cho mã của bạn tương thích với trình duyệt cũ, đặc biệt là IE8-:

<!--[if lte IE 9]>
    <script src="/path/to/js/masonry.pkgd.min.js"></script>
<![endif]-->

Ở đây chúng tôi đi:

.masonry-brick {
    color: #FFF;
    background-color: #FF00D8;
    display: inline-block;
    padding: 5px;
    width: 100%;
    margin: 1em 0; /* for separating masonry-bricks vertically*/
}

@media only screen and (min-width: 480px) {
    .masonry-container {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

@media only screen and (min-width: 768px) {
    .masonry-container {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}

@media only screen and (min-width: 960px) {
    .masonry-container {
        -moz-column-count: 5;
        -webkit-column-count: 5;
        column-count: 5;
    }
}

<div class="masonry-container">
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
</div>

Mở rộng đoạn trích

— Behradkhodayar
nguồn

Bạn có biết làm thế nào để có không gian bằng nhau giữa các vật phẩm trong khối xây và thùng chứa không?

— hướng nội

5

Điều đó tốt nhưng đối với nhiều người, cần phải ĐẶT HÀNG masonry bricks. Cột yêu cầu mọi thứ từ trên xuống dưới, câu hỏi yêu cầu thứ tự giữ nguyên theo chiều ngang, không chuyển sang chiều dọc. Ví dụ: khối ngắn nhất được tìm thấy ở trên NÊN ở cột thứ ba nhưng hàng trên cùng.

— jscul

4

Tùy chọn tốt nhất để giải quyết điều đó chỉ với css là sử dụng thuộc tính đếm cột css.

 .content-box {
   border: 10px solid #000000;
   column-count: 3;
 }

Kiểm tra điều này để biết thêm: https://developer.mozilla.org/en/docs/Web/CSS/column-count

— Patricio Gabriel Maseda
nguồn

3

Bạn có thể sử dụng màn hình: lưới

ví dụ:

Đây là một lưới có 7 cột và các hàng của bạn có kích thước tự động.

.myGrid{
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
      grid-auto-rows: auto;
      grid-gap: 10px;
      justify-items: center;
}

Để biết thêm chi tiết, hãy liên kết theo liên kết sau: https://css-tricks.com/snippets/css/complete-guide-grid/

— vrbsm
nguồn

2

Với Mô-đun lưới CSS, bạn có thể tạo bố cục khá giống nhau .

Bản demo CodePen

1) Đặt ba cột lưới có chiều rộng cố định

ul {
  display: grid;
  grid-template-columns: 150px 150px 150px;
  ...
}

2) Đảm bảo các mục có chiều cao lớn trải dài 2 hàng

li:nth-child(1),
li:nth-child(3),
li:nth-child(5),
li:nth-child(8),
li:nth-child(9),
li:nth-child(10),
li:nth-child(12)
{
  grid-row: span 2;
}

Hiển thị đoạn mã

body {
  margin: 0;
}
ul {
  display: grid;
  grid-template-columns: 150px 150px 150px;
  grid-gap: 1rem;
  justify-content: center;
  align-items: center;
  
  /* boring properties: */
  list-style: none;
  width: 90vw;
  height: 85vh;
  margin: 4vh auto;
  border: 5px solid green;
  padding: 1rem;
  overflow: auto;
  counter-reset: item;
}
li {
  position: relative;
}
li:after {
  content: counter(item);
  counter-increment: item;
  position: absolute;
  padding: 0.3rem;
  background: salmon;
  color: white;
  left:0;
  top:0;
}
img {
  outline: 5px solid salmon;
}
li:nth-child(1),
li:nth-child(3),
li:nth-child(5),
li:nth-child(8),
li:nth-child(9),
li:nth-child(10),
li:nth-child(12)
{
  grid-row: span 2;
}

<ul>
  <li><img src="http://lorempixel.com/150/150/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/50/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/140/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/80/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/220/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/120/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/70/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/200/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/230/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/240/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/130/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/160/animals" alt="" /></li>
</ul>

Mở rộng đoạn trích

Bản demo Codepen

Vấn đề:

Khoảng cách giữa các mục sẽ không thống nhất
Bạn phải đặt thủ công các mục lớn / cao thành khoảng 2 hàng trở lên
Hỗ trợ trình duyệt hạn chế :)

— Danield
nguồn

1

và nếu bạn muốn đi xa hơn cả nề, hãy sử dụng đồng vị http://isotope.metafizzy.co/ đây là phiên bản nâng cao của nề (được phát triển bởi cùng một tác giả), nó không phải là CSS thuần túy, nó sử dụng trợ giúp của Javascript nhưng nó rất phổ biến, vì vậy bạn sẽ tìm thấy nhiều tài liệu

nếu bạn thấy nó rất phức tạp thì đã có nhiều plugin cao cấp dựa trên sự phát triển của chúng trên đồng vị rồi, ví dụ như Media Box http://codecanyon.net/item/media-boxes-responsive-jquery-grid/5683020

— người dùng1978456
nguồn

1

Có một ví dụ dựa trên lưới .

.grid-layout {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
  grid-auto-flow: dense;
  padding: 10px;
}

.grid-layout .item {
  padding: 15px;
  color: #fff;
  background-color: #444;
}

.span-2 {
  grid-column-end: span 2;
  grid-row-end: span 2;
}

.span-3 {
  grid-column-end: span 3;
  grid-row-end: span 4;
}

<div class="grid-layout">
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item span-3">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item span-2">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item span-3">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item span-2">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
</div>

Mở rộng đoạn trích

dựa trên cây bút mã này của Rachel Andrew FTW

— Vladimir Ishenko
nguồn