วิธีสร้าง Grid / Tile View

129

ตัวอย่างเช่นฉันมีคลาส. บทความและฉันต้องการดูคลาสนี้เป็นมุมมองตาราง ดังนั้นฉันจึงใช้สไตล์นี้:

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

ลักษณะนั้นจะทำให้. article ดูเป็นกระเบื้อง / ตาราง ทำงานได้ดีกับความสูงคงที่ แต่ถ้าฉันต้องการตั้งค่าความสูงเป็นอัตโนมัติ (ยืดโดยอัตโนมัติตามข้อมูลที่อยู่ในนั้น) เส้นตารางจะดูน่ารังเกียจ

ป้อนคำอธิบายภาพที่นี่

และฉันต้องการให้มุมมองเป็นแบบนี้:

ป้อนคำอธิบายภาพที่นี่

— Ariona Rian
แหล่งที่มา

79

ประเภทของรูปแบบนี้จะเรียกว่ารูปแบบการก่ออิฐ การก่ออิฐเป็นรูปแบบตารางอื่น แต่จะเติมช่องว่างที่เกิดจากความสูงที่แตกต่างกันขององค์ประกอบ

jQuery Masonryเป็นหนึ่งในปลั๊กอิน jQuery สำหรับสร้างเค้าโครงก่ออิฐ

หรือคุณสามารถใช้ CSS3 columns แต่ตอนนี้ปลั๊กอินที่ใช้ jQuery เป็นตัวเลือกที่ดีที่สุดเนื่องจากมีปัญหาความเข้ากันได้กับคอลัมน์ CSS3

— bookcasey
แหล่งที่มา

3

เพิ่ม CSS3-way ที่นี่เพื่ออยู่!

— behradkhodayar

27

คุณสามารถใช้ flexbox

วางองค์ประกอบของคุณในคอนเทนเนอร์แบบหลายคอลัมน์แบบยืดหยุ่น
```
#flex-container {
  display: flex;
  flex-flow: column wrap;
}
```
จัดลำดับองค์ประกอบใหม่เพื่อให้ลำดับ DOM ได้รับการยอมรับในแนวนอนแทนที่จะเป็นแนวตั้ง ตัวอย่างเช่นหากคุณต้องการ 3 คอลัมน์
```
#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 */
}
```
น่าเสียดายที่เบราว์เซอร์บางตัวยังไม่รองรับการแบ่งบรรทัดใน flexbox มันทำงานบน Firefox แม้ว่า

แสดงข้อมูลโค้ด

#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>

ขยายข้อมูลโค้ด

— Oriol
แหล่งที่มา

ว้าวนี่เป็นคำถามเก่า และการใช้เฟล็กบ็อกซ์เพื่อจำลองเลย์เอาต์การก่ออิฐไม่ใช่ตัวเลือกที่ดีที่สุด ตัวอย่างข้อมูลของคุณไม่ทำงาน: D ฉันคิดว่าคุณพลาดประเด็นนี้ วิธีแก้ปัญหาอื่น ๆ ในการแก้ปัญหานี้คือการใช้คอลัมน์ CSS3 แต่ขอบคุณสำหรับคำตอบ

— Ariona Rian

1

@ArionaRian ลองใช้ตัวอย่างข้อมูลบน Firefox เบราว์เซอร์อื่น ๆ ยังไม่รองรับการแบ่งบรรทัดที่บังคับ และใช่คอลัมน์ CSS อาจใช้งานได้เช่นกัน แต่ต่างจาก flexbox ที่ดูเหมือนจะออกแบบมาสำหรับข้อความมากกว่าสำหรับเค้าโครง

— Oriol

ใช่นั่นคือปัญหา :) นั่นเป็นเหตุผลว่าทำไมจนถึงตอนนี้เรายังคงยึดติดกับปลั๊กอินก่ออิฐ / ไอโซโทปสำหรับการออกแบบประเภทนี้

— Ariona Rian

เพียงแค่ใส่ display: flex; ดิ้นห่อ: ห่อ; (และไม่มีอะไรเพิ่มเติม) บนคอนเทนเนอร์และทำงานได้อย่างสมบูรณ์แบบใน Chrome, Firefox, Safari, IE11 บน Win11 และ Win7 ระวังความสูงต่ำสุดด้วย (ดูcaniuse.com/#search=flex-wrap )

— LBJ

@LBJ แต่องค์ประกอบจะถูกจัดเรียงเป็นแถว นั่นไม่ใช่พฤติกรรมที่ต้องการที่นี่

— Oriol

11

ตอนนี้ CSS3 มีให้บริการอย่างกว้างขวางและเข้ากันได้ผ่านเบราว์เซอร์หลัก ๆ แล้วถึงเวลาสำหรับโซลูชันที่สมบูรณ์พร้อมกับเครื่องมือตัวอย่างของ SO:

สำหรับการสร้างรูปแบบการก่ออิฐโดยใช้ CSS3 column-countควบคู่ไปด้วยcolumn-gapก็เพียงพอแล้ว แต่ฉันก็เคยmedia-queriesทำให้มันตอบสนองด้วย

ก่อนที่จะดำน้ำในการใช้งานโปรดพิจารณาว่าการเพิ่มทางเลือกไลบรารี jQuery Masonry จะปลอดภัยกว่ามากเพื่อให้โค้ดของคุณเข้ากันได้กับเบราว์เซอร์เดิมโดยเฉพาะ IE8-:

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

ไปเลย:

.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>

ขยายข้อมูลโค้ด

— behradkhodayar
แหล่งที่มา

คุณรู้หรือไม่ว่าจะมีพื้นที่เท่ากันระหว่างสิ่งของในงานก่ออิฐและภาชนะได้อย่างไร?

— intcreator

5

เป็นสิ่งที่ดี แต่สำหรับคนจำนวนมากมีความจำเป็นที่จะต้องสั่งซื้อmasonry bricks. คอลัมน์จะเรียงลำดับสิ่งต่างๆจากบนลงล่างคำถามคือขอให้คำสั่งซื้อคงเดิมในแนวนอนไม่ใช่เปลี่ยนเป็นแนวตั้ง ตัวอย่างเช่นบล็อกที่สั้นที่สุดที่พบด้านบนควรอยู่ในคอลัมน์ที่สาม แต่อยู่ในแถวบนสุด

— jscul

4

ตัวเลือกที่ดีที่สุดในการแก้ปัญหานั้นด้วย css เท่านั้นคือการใช้คุณสมบัติการนับคอลัมน์ css

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

ตรวจสอบข้อมูลเพิ่มเติมได้ที่https://developer.mozilla.org/en/docs/Web/CSS/column-count

— Patricio Gabriel Maseda
แหล่งที่มา

3

คุณสามารถใช้ display: grid

ตัวอย่างเช่น:

นี่คือตารางที่มี 7 คอลัมน์และแถวของคุณมีขนาดอัตโนมัติ

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

สำหรับรายละเอียดเพิ่มเติมเข้าไปที่ลิงค์ต่อไปนี้: https://css-tricks.com/snippets/css/complete-guide-grid/

— vrbsm
แหล่งที่มา

2

ด้วยCSS Grid Moduleคุณสามารถสร้างเลย์เอาต์ที่คล้ายกันได้

การสาธิต CodePen

1) ตั้งค่าคอลัมน์กริดที่มีความกว้างคงที่สามคอลัมน์

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

2) ตรวจสอบให้แน่ใจว่ารายการที่มีความสูงขนาดใหญ่ครอบคลุม 2 แถว

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;
}

แสดงข้อมูลโค้ด

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>

ขยายข้อมูลโค้ด

การสาธิต Codepen

ปัญหา:

ช่องว่างระหว่างรายการจะไม่เท่ากัน
คุณต้องตั้งค่ารายการขนาดใหญ่ / สูงด้วยตนเองเพื่อขยาย 2 แถวขึ้นไป
รองรับเบราว์เซอร์ที่ จำกัด :)

— Danield
แหล่งที่มา

1

และหากคุณต้องการไปให้ไกลกว่าการก่ออิฐให้ใช้ไอโซโทปhttp://isotope.metafizzy.co/ซึ่งเป็นรุ่นขั้นสูงของการก่ออิฐ (พัฒนาโดยผู้เขียนคนเดียวกัน) ซึ่งไม่ใช่ CSS ที่บริสุทธิ์ แต่ใช้ Javascript แต่เป็นที่นิยมมากดังนั้นคุณจะพบเอกสารมากมาย

หากคุณพบว่ามันซับซ้อนมากแสดงว่ามีปลั๊กอินพรีเมี่ยมมากมายที่พัฒนาโดยใช้ไอโซโทปอยู่แล้วเช่น Media Boxes http://codecanyon.net/item/media-boxes-responsive-jquery-grid/5683020

— user1978456
แหล่งที่มา

1

มีหนึ่งตัวอย่างที่ใช้กริด

.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>

ขยายข้อมูลโค้ด

ตามรหัสปากกานี้ โดย Rachel Andrew FTW

— Vladimir Ishenko
แหล่งที่มา