Sifat grid

Sifat grid merupakan bentuk penulisan ringkas untuk semua sifat lajur dan baris kontena grid. Semua nilai ditulis dalam satu baris melalui slash.

Melalui grid dalam satu baris hanya boleh digambarkan satu jenis sifat sahaja - eksplisit (grid-template-rows, grid-template-columns, grid-template-areas) atau implisit (grid-auto-rows, grid-auto-columns, grid-auto-flow). Sifat-sifat yang tidak dinyatakan, mengambil nilai lalai.

Sintaks

csselemen {
  grid: sifat grid;
}

Contoh

Mari buat jadual dengan menggunakan sifat grid:

html<div id="parent">
  <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>

css#parent {
  display: grid;
  grid: 1fr 1fr 1fr / 1fr 1fr 1fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}

#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Contoh

Sekarang mari tetapkan untuk baris kedua dan ketiga lebar yang sama, dan untuk setiap lajur - lebar yang berbeza:

html<div id="parent">
  <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>

css#parent {
  display: grid;
  grid: 60px 1fr 60px / 20% 1fr 15%;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 300px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Contoh

Sekarang dalam jadual dari contoh sebelumnya buat baris atas dengan lebar dua pecahan, dan lajur pertama - separuh pecahan:

html<div id="parent">
  <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>

css#parent {
  display: grid;
  grid: 2fr 1fr 1fr / 0.5fr 1fr 1fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Lihat juga