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

3 votes182 views1 answer
Get company id odoo
CSS
14 votes213 views6 answers
Bootstrap image size
CSS Bootstrap
1 vote175 views1 answer
Content-visibility
CSS
1 vote168 views3 answers
Jquery set div height dynamically
CSS
1 vote157 views1 answer
Kommentar css
CSS
1 vote152 views3 answers
Tag php
CSS
0 vote163 views1 answer
Nuxt JisonLexerError: Lexical error on line 1: Unrecognized text.
CSS
0 vote172 views1 answer
How to use purgecss with webpack mix laravel
CSS
0 vote172 views1 answer
Start a css file
CSS
1 vote188 views1 answer
Vertical line between two divs
CSS