CSS Grid xassələrinin qısaldılmış yazılışı

grid xassəsi grid-konteynerin bütün sütun və sıra xassələrinin qısaldılmış yazılış formasını təmsil edir. Bütün dəyərlər bir sətirdə slash işarəsi ilə ayrılaraq yazılır.

grid vasitəsilə bir sətirdə yalnız bir növ xassəni təsvir etmək olar - aşkar (grid-template-rows, grid-template-columns, grid-template-areas) və ya gizli (grid-auto-rows, grid-auto-columns, grid-auto-flow). Göstərilməyən xassələr standart dəyərlər alır.

Nümunə

Gəlin grid xassəsindən istifadə edərək cədvəl yaradaq:

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;
}

Результат:

Nümunə

İndi isə gəlin ikinci və üçüncü sıralara eyni eni, hər bir sütuna isə müxtəlif en təyin edək:

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;
}

Результат:

Nümunə

İndi isə əvvəlki nümunədəki cədvəldə yuxarı sıra enini iki fraksiya, ilk sütun enini isə yarım fraksiya edək:

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;
}

Результат:

Praktiki tapşırıqlar