CSS grid häsiýetleriniň gysgaldan ýazylan görnüşi

grid häsiýeti grid konteýneriniň ähli sütün we hatar häsiýetleriniň gysgaldan ýazylan görnüşidir. Ähli bahalar bir setirde çyzyk arkaly ýazylýar.

grid arkaly bir setirde diňe bir görnüşli häsiýetleri - açyk-aydyň (grid-template-rows, grid-template-columns, grid-template-areas) ýa-da ýaşyryn (grid-auto-rows, grid-auto-columns, grid-auto-flow) görkezip bolýar. Görkezilmedik galan häsiýetler bellenen deslapky bahalary kabul edýär.

Mysal

grid häsiýetini ulanyp bir tablisa düzeliň:

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: 600px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Mysal

Indi bolsa ikinji we üçünji hatarlara deň giňişlik bereliň, her bir sütüne bolsa parhly giňişlik bereliň:

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: 600px;
  height: 300px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Mysal

Indi bolsa öňki mysaldaky tablisada ýokarky hatary iki fraksiýa giňişlikde edeliň, birinji sütüni bolsa ýarym fraksiýa giňişlikde edeliň:

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: 600px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Amaly wezipes