Rumah  >  Soal Jawab  >  teks badan

Cara meletakkan elemen grid di hujung bekas

<p>Saya mempunyai bekas grid dan saya mahu item saya berada di bahagian bawah. </p> <p>Saya mempunyai ini sebenarnya</p> <p>Saya mahu ini Jangkaan</p> <p> <pre class="brush:css;toolbar:false;">.container { paparan: grid; grid-template-columns: repeat(14, 1fr); grid-template-rows: repeat(6, 1fr); jurang grid: 8px; lebar: 200px; latar belakang: biru; } .item { warna latar belakang: merah; warna: putih; } .item-1 { lajur grid: rentang 5; grid-row: rentang 6; } .item-2 { lajur grid: rentang 4; baris grid: rentang 5; } .item-3 { lajur grid: rentang 3; grid-row: rentang 4; }</pre> <pre class="brush:html;toolbar:false;"><div class="container"> <div class="item item-1">item 1</div> <div class="item item-2">item 2</div> <div class="item item-3">item 3</div> </div></pre> </p> <p>PS: Saya telah mencuba place-item: end; dan align-item: end;</p>
P粉387108772P粉387108772439 hari yang lalu394

membalas semua(1)saya akan balas

  • P粉710478990

    P粉7104789902023-08-29 09:06:26

    Anda boleh menggunakan grid-columngrid-row的两个值start / endsintaks untuk menentukan di mana projek anda bermula dan berakhir.

    Sebagai contoh, grid-row: 2 / span 3; akan bermula pada garisan grid ke-2 dan menjangkau 3 garisan grid sehingga garisan grid ke-5.

    .container {
      display: grid;
      grid-template-columns: repeat(14, 1fr);
      grid-template-rows: repeat(6, 1fr);
      grid-gap: 8px;
      width: 200px;
      background: blue;
    }
    .item {
      background-color: red;
      color: white;
    }
    .item-1 {
      grid-column: span 5;
      grid-row: span 6;
    }
    .item-2 {
      grid-column: 6 / span 4;
      grid-row: 2 / span 5;
    }
    .item-3 {
      grid-column: 10 / span 3;
      grid-row: 3 / span 4;
    }
    <div class="container">
      <div class="item item-1">Item 1</div>
      <div class="item item-2">Item 2</div>
      <div class="item item-3">Item 3</div>
    </div>

    balas
    0
  • Batalbalas