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:
<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>
#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:
<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>
#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:
<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>
#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
Aşağıdakı nümunəni həyata keçirin:
Aşağıdakı nümunəni həyata keçirin:
Aşağıdakı nümunəni həyata keçirin: