Grid repeat css

Css grid repeat

repeat(/*Number of repeats*/, /*Code to be repeated*/)

.gridContainer {
	grid-template-columns: repeat(4, 100px); /*Creates 4 columns, each 100px in width*/
	grid-template-rows: repeat(2, 250px); /*Creates 2 rows, each 250px in height*/
}

Source: css-tricks.com

Repeat css

/* <track-repeat> values */
repeat(4, 1fr)
repeat(4, [col-start] 250px [col-end])
repeat(4, [col-start] 60% [col-end])
repeat(4, [col-start] 1fr [col-end])
repeat(4, [col-start] min-content [col-end])
repeat(4, [col-start] max-content [col-end])
repeat(4, [col-start] auto [col-end])
repeat(4, [col-start] minmax(100px, 1fr) [col-end])
repeat(4, [col-start] fit-content(200px) [col-end])
repeat(4, 10px [col-start] 30% [col-middle] auto [col-end])
repeat(4, [col-start] min-content [col-middle] max-content [col-end])

/* <auto-repeat> values */
repeat(auto-fill, 250px)
repeat(auto-fit, 250px)
repeat(auto-fill, [col-start] 250px [col-end])
repeat(auto-fit, [col-start] 250px [col-end])
repeat(auto-fill, [col-start] minmax(100px, 1fr) [col-end])
repeat(auto-fill, 10px [col-start] 30% [col-middle] 400px [col-end])

/* <fixed-repeat> values */
repeat(4, 250px)
repeat(4, [col-start] 250px [col-end])
repeat(4, [col-start] 60% [col-end])
repeat(4, [col-start] minmax(100px, 1fr) [col-end])
repeat(4, [col-start] fit-content(200px) [col-end])
repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end])

Source: developer.mozilla.org

Grid repeat css

#container {
  display: grid;
  grid-template-columns: repeat(2,1fr) 100px;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}

Source: developer.mozilla.org

Similar codes

1 vote363 views1 answer
Css selctors
CSS
8 votes352 views1 answer
When hover target diffrent element
CSS
0 vote371 views2 answers
Add profile picture to a form in html and css
CSS
0 vote381 views1 answer
@font-face multiple font weights
CSS
0 vote355 views2 answers
* css meaning
CSS
12 votes373 views3 answers
Sticky header css
CSS
0 vote348 views2 answers
Media Query smartphone only
CSS
0 vote354 views1 answer
Tail block css
CSS
1 vote360 views2 answers
Css ios disable zoom
CSS
1 vote355 views1 answer
Ionic input line color
CSS