CSS Grid-də repeat funksiyası
Əgər sizin eyni ölçülər təyin olunan bir neçə sütununuz varsa,
o zaman repeat funksiyasından istifadə edərək
yazılışı sadələşdirə bilərsiniz.
Bu funksiyanın birinci parametrində sütunların sayı,
ikinci parametrində isə onların eni göstərilir.
Gəlin nümunələr üzərində bunun necə işlədiyinə baxaq.
Nümunə
Tutaq ki, bizim eyni ölçüdə üç sütunumuz var:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
repeat vasitəsilə yazılışı sadələşdirək:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Nümunə
Tutaq ki, bizim eyni ölçüdə üç sütunumuz var, dördüncü sütun isə fərqli ölçüdədir:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr;
}
repeat vasitəsilə yazılışı sadələşdirək:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 2fr;
}
Nümunə
Tutaq ki, bizim ilk üç sütunumuz bir ölçüdə, ikinci üç sütun isə başqa ölçüdədir:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}
repeat vasitəsilə yazılışı sadələşdirək:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}
Nümunə
Tutaq ki, bizim ilk üç sütunumuz bir ölçüdə, sonra başqa bir sütun, və daha sonra başqa ölçüdə daha üç sütunumuz var:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}
repeat vasitəsilə yazılışı sadələşdirək:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 3fr repeat(3, 2fr);
}
Nümunə
Sadələşdirmə istənilən ölçü vahidi üçün işləyir. Nümunə üçün tutaq ki, bizim piksel ilə üç sütunumuz var:
#parent {
display: grid;
grid-template-columns: 200px 200px 200px;
}
repeat vasitəsilə yazılışı sadələşdirək:
#parent {
display: grid;
grid-template-columns: repeat(3, 200px);
}
Praktiki tapşırıqlar
repeat vasitəsilə 4 eyni ölçüdə
sütun düzəldin.
4 sütunu 100px ölçüdə,
və daha 3 sütunu 2fr ölçüdə düzəldin.
2 sütunu 100px ölçüdə,
daha 3 sütunu 200px ölçüdə,
sonra 1fr ölçüdə bir sütun,
və sonra 2 sütunu
10% ölçüdə düzəldin.
