Ini adalah tindak lanjut untuk pertanyaan yang saya tanyakan sebelumnya, bagaimana cara mendapatkan css baris-gap dan celah kolom untuk tidak muncul jika baris atau kolom hilang?. Saya sekarang memiliki tiga negara bagian dari grid tergantung pada ...

0
Mike McCollister 5 April 2021, 15:47

2 jawaban

Jawaban Terbaik

Cukup tambahkan grid-row: span 3; ke teks di dalam kueri media pertama:

div.thumbnail {
  background-color: green;
  padding: 1em;
  break-inside: avoid;
  display: grid;
  column-gap: 1em;
  row-gap: 1em;
  grid-template-columns: auto 1fr; /* define only 2 explicit columns */
  grid-auto-flow: dense;
}

div.thumbnail div.image1 {
  background-color: cyan;
  text-align: right;
  grid-column: 1;
  height: 30px;
}

div.thumbnail div.image2 {
  background-color: pink;
  text-align: left;
  grid-column: 3; /* add another column if (2) or (3) is present */
  height: 30px;
}

div.thumbnail div.image3 {
  background-color: limegreen;
  text-align: left;
  grid-column: 3; /* add another column if (2) or (3) is present */
  height: 30px;
}

div.thumbnail div.text {
  background-color: orange;
  grid-column: 2;
}


/* for printing and not so wide displays */

@media screen and (max-width: 1000px),
print and (max-width: 7.5in) {
  div.thumbnail div.image1,
  div.thumbnail div.image2,
  div.thumbnail div.image3 {
    grid-column: 1;
    text-align: right;
  }
  div.thumbnail div.text {
    grid-row:span 3;
  }
}


/* for printing and small devices like iPhone #1 */

@media screen and (max-width: 760px),
print and (max-width: 5in) {
  div.thumbnail {
    grid-template-columns: 1fr ;
  }
  div.thumbnail div.image1,
  div.thumbnail div.image2,
  div.thumbnail div.image3 {
    text-align: center;
    grid-column: 1;
    margin: auto;
  }
  div.thumbnail div.text {
    grid-column: 1;
    margin: auto;
  }
}
<h2>Three Images</h2>

<div class="thumbnail">
  <div class="image1" style="width:200px">
    image 1
  </div>
  <div class="image2" style="width:200px">
    image 2
  </div>
  <div class="image3" style="width:200px">
    image 3
  </div>
  <div class="text">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quo odit earum error. Nisi fugit vel nesciunt sint! Officia voluptatum distinctio beatae sint qui, similique possimus, natus, iste sit delectus quaerat? Lorem ipsum dolor sit amet consectetur,
    adipisicing elit. Ex quibusdam dolorem aut vitae ipsam quod asperiores alias veritatis tenetur facilis deleniti sunt itaque nesciunt eum corporis, eius incidunt iure pariatur.
  </div>
</div>
1
Temani Afif 5 April 2021, 14:22

Anda dapat menggunakan kotak fleksibel dan membuat wadah baris utama, yang kemudian akan kembali memiliki 2 baris lain, bertindak sebagai cols, dengan menentukan ukuran mereka untuk mengambil x jumlah ruang, tergantung pada viewport.

Perhatikan bahwa saya secara pribadi mengikuti prinsip-prinsip "Ponsel Pertama", jadi saya akan memanfaatkan kueri selebar min, bukan lebar maks.

Contoh:

Html:

<div class="main row">
    <div class="img-container row">
        <div class="img-item">
            Image 1
        </div>
        <div class="img-item">
            Image 2
        </div>
        <div class="img-item">
            Image 3
        </div>
    </div>
    <div class="text-container row">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quo odit earum error. Nisi fugit vel nesciunt sint! Officia
        voluptatum distinctio beatae sint qui, similique possimus, natus, iste sit delectus quaerat? Lorem ipsum dolor sit amet
        consectetur, adipisicing elit. Ex quibusdam dolorem aut vitae ipsam quod asperiores alias veritatis tenetur facilis
        deleniti sunt itaque nesciunt eum corporis, eius incidunt iure pariatur.
    </div>
</div>

CSS:

.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 0 0 100%;
}

.img-container {
    gap: 1rem;
}

.img-container .img-item {
  padding: 15px;
    width: 100%;
}

.img-container .img-item:nth-child(1) {
    background-color: lightblue;
}

.img-container .img-item:nth-child(2) {
    background-color: lightpink;
}

.img-container .img-item:nth-child(3) {
    background-color: lightgreen;
}

.text-container {
  padding: 15px;
 background-color: orange;
}

.main {
    justify-content: center;
    gap: 1rem;
    background-color: darkgreen;
  padding: 15px;
}

@media screen and (min-width: 760px),
print and (max-width: 5in) {
    .img-container {
        flex: 0 0 23%;
        max-width: 23%;
    }
    .text-container {
        flex: 0 0 73%;
        max-width: 73%;
    background-color: orange;
    }
}

Potongan:

.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 0 0 100%;
}

.img-container {
    gap: 1rem;
}

.img-container .img-item {
  padding: 15px;
    width: 100%;
}

.img-container .img-item:nth-child(1) {
    background-color: lightblue;
}

.img-container .img-item:nth-child(2) {
    background-color: lightpink;
}

.img-container .img-item:nth-child(3) {
    background-color: lightgreen;
}

.text-container {
  padding: 15px;
  background-color: orange;
}

.main {
    justify-content: center;
    gap: 1rem;
    background-color: darkgreen;
  padding: 15px;
}

@media screen and (min-width: 760px),
print and (max-width: 5in) {
    .img-container {
        flex: 0 0 23%;
        max-width: 23%;
    }
    .text-container {
        flex: 0 0 73%;
        max-width: 73%;
    }
}
<div class="main row">
    <div class="img-container row">
        <div class="img-item">
            Image 1
        </div>
        <div class="img-item">
            Image 2
        </div>
        <div class="img-item">
            Image 3
        </div>
    </div>
    <div class="text-container row">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quo odit earum error. Nisi fugit vel nesciunt sint! Officia
        voluptatum distinctio beatae sint qui, similique possimus, natus, iste sit delectus quaerat? Lorem ipsum dolor sit amet
        consectetur, adipisicing elit. Ex quibusdam dolorem aut vitae ipsam quod asperiores alias veritatis tenetur facilis
        deleniti sunt itaque nesciunt eum corporis, eius incidunt iure pariatur.
    </div>
</div>

Codepen tautan di sini.

0
Martin 5 April 2021, 14:56