(Saya mencoba mengonversi halaman entri data ini dari tata letak "tabel" CSS/HTML yang sangat primitif menjadi sesuatu yang sedikit lebih baik, menggunakan tata letak Grid CSS).

Sejalan dengan praktik umum, sepertinya, saya telah membuat lebar 12 kolom. Setiap bidang entri memiliki label, dengan lebar yang sama. Dengan kata lain CSS saya saat ini sangat berulang:

.container {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-gap: 10px;
}

#SigNameLabel {
  grid-column: 1 / 13;
  grid-row: 2;
}

#SignatureName {
  grid-column: 5 / 13;
  grid-row: 2;
}

#PaymentNoLabel {
  grid-column: 1 / 13;
  grid-row: 3;
}

#PaymentNo {
  grid-column: 5 / 13;
  grid-row: 3;
}

#CurrencyLabel {
  grid-column: 1 / 13;
  grid-row: 4;
}

#Currency {
  grid-column: 5 / 13;
  grid-row: 4;
}

* {
  border: 1px solid #999;
}        
<div class="container">
  <div id='SigNameLabel' class='unselectable'>Signature name:</div>
  <div id='SignatureName' class='unselectable dataField single-line'></div>

  <div id='PaymentNoLabel' class='unselectable'>Payment No:</div>
  <div id='PaymentNo' class='unselectable dataField single-line'></div>

  <div id='CurrencyLabel' class='unselectable'>Currency:</div>
  <div id='Currency' class='dataField single-line'></div>
</div>

Singkat menggunakan JS untuk "membuat" tata letak secara otomatis, yaitu dengan menganalisis DIVs di container, apakah ada cara untuk membuat CSS tidak terlalu rumit dan eksplisit, lebih hanya "mengambil alih kepemimpinannya dari" apa yang dilakukan HTML?

Misalnya, saya harus memberikan ID khusus untuk setiap label di sini: ketika mereka masing-masing duduk di TD mereka sendiri, mereka tidak membutuhkannya. Apakah ada cara agar setiap label tersebut DIV dapat diberi kelas, katakanlah left-hand-column, dan entah bagaimana mereka semua dapat grid-column: 1 / 13 diterapkan padanya, dan entah bagaimana grid-row sama dengan bidang data DIV di sebelah kanan mereka?

0
mike rodent 28 Oktober 2019, 00:11

1 menjawab

Jawaban Terbaik

Anda dapat menyederhanakan kode Anda seperti di bawah ini. Dan Anda tidak perlu 12 kolom

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 10px;
}

.container>*:nth-child(even) {
  grid-column: span 2;
  border:1px solid;
}
.container>*:nth-child(odd) {
  /* Not sure if you need this but it will allow 
     the full width of the grid like your code grid-column: 1 / 13;
  width:calc(300% + 2*10px); */
  border:1px solid red;
}
<div class="container">
  <div id='SigNameLabel' class='unselectable'>Signature name:</div>
  <div id='SignatureName' class='unselectable dataField single-line'></div>

  <div id='PaymentNoLabel' class='unselectable'>Payment No:</div>
  <div id='PaymentNo' class='unselectable dataField single-line'></div>

  <div id='CurrencyLabel' class='unselectable'>Currency:</div>
  <div id='Currency' class='dataField single-line'></div>
</div>
1
halfer 30 Oktober 2019, 00:29