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:

css#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

repeat vasitəsilə yazılışı sadələşdirək:

css#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:

css#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 2fr;
}

repeat vasitəsilə yazılışı sadələşdirək:

css#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:

css#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}

repeat vasitəsilə yazılışı sadələşdirək:

css#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:

css#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}

repeat vasitəsilə yazılışı sadələşdirək:

css#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:

css#parent {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

repeat vasitəsilə yazılışı sadələşdirək:

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 200px);
}

Praktiki tapşırıqlar