CSS3 Grid Functions

Next ❯Grid Extra Properties

  • turned_in_notGrid Functions
    • repeat()
    • minmax()
    • fit-content()

repeat( )

To shorten the grid-template related property value length if there are repeating values in it

Syntax

repeat(quantity, width | height)
  • Works with grid-template-row, grid-template-column & grid-template
  • Just combine the same repeating values in columns or rows while the next value is same
  • It solves the problem of creating bigger grid in smaller syntax
For Example:
If you want to create a 10x10 grid or more than that, then you have to specify value for every grid row & column
/* Earlier for 10x10 grid: */
grid-template:1f 1f 1f 1f 1f 1f 1f 1f 1f 1f / 1f 1f 1f 1f 1f 1f 1f 1f 1f 1f;

/* After using repeat( ) for 10x10 grid: */
grid-template: repeat(10,1fr)/ repeat(10,1fr);

/*OR*/

/* Earlier for 10x10 grid: */
grid-template:1f 1f 1f 1f 1f 30px 30px 30px 30px 30px / 1f 1f 1f 1f 1f 80px 80px 80px 80px 80px;

/* After using repeat( ) for 10x10 grid: */
grid-template: repeat(5,1fr) repeat(5,30px)/ repeat(5,1fr) repeat(5,80px);

1
2
3
4

Try some, to read comments

.grid-container {
 display: grid;
/*grid-template: grid-template-rows / grid-template-columns ;*/
 grid-template: repeat(2,1fr)/ repeat(2,1fr);
 gap: 5px;
 border: 5px solid #42c6b3;
}
repeatsubject
repeatclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
.grid-container {
 display: grid;
/* grid-template: grid-template-rows / grid-template-columns ;*/
 grid-template: repeat(2,1fr)/repeat(2,1fr);
 gap: 5px;
 border: 5px solid #42c6b3;
}
.grid-container div{
  background-color: #3e3737;
  text-align: center;
  color: white;
  line-height: 40px;
}
</style>
</head>
<body>
<div className="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
</body>
</html>
Try some:
grid-template:repeat(2,1fr)/repeat(3,1fr);
grid-template:repeat(2,1fr)/repeat(2,1fr);
grid-template:repeat(3,1fr)/repeat(3,50px);
grid-template:repeat(2,40px)/repeat(2,80px);

minmax( )

To limit the column width or row height, within a maximum range available between specified range

Syntax

minmax(min-range, max-range)

min-range : must be smaller than max-range, preferred value 'auto'

  • Note! The max-range value set to the specified row or column only if that much space available inside the grid container, otherwise it will cover nearest available space value to the max-range

content 1
content 2
content 3

Try some, to read comments

.grid-container {
 display: grid;
 grid-template-columns: minmax(auto, 100px) minmax(auto, 100px);
 gap: 5px;
 border: 5px solid #42c6b3;
 height: 150px;
 width: 300px;
}
minmaxsubject
minmaxclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
.grid-container {
 display: grid;
 grid-template-columns: minmax(auto, 100px) minmax(auto, 100px);
 gap: 5px;
 border: 5px solid #42c6b3;
 height: 150px;
 width: 300px;
}
.grid-container div{
  background-color: #3e3737;
  text-align: center;
  color: white;
  line-height: 40px;
}
</style>
</head>
<body>
<div className="grid-container">
  <div>content 1</div>
  <div>content 2</div>
  <div>content 3</div>
</div>
</body>
</html>
Try some:
grid-template-columns: minmax(auto, 180px) minmax(auto, 180px);
grid-template-columns: minmax(auto, 100px) minmax(auto, 100px);
grid-template-rows: minmax(auto, 80px) minmax(auto, 80px);
grid-template-rows: minmax(auto, 60px) minmax(auto, 60px);

fit-content( )

To limit the column width, within the maximum content length available or lesser than that

Syntax

fit-content(width-range)

less content then specified
My content is more then specified width(250px). So it uses next line after exceeding 250px width
3
.grid-container {
 display: grid;
 grid-template-columns: fit-content(250px) fit-content(250px) 1fr;
 gap: 5px;
 border: 5px solid #42c6b3;
}
fit-contentsubject
fit-contentclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
.grid-container {
 display: grid;
 grid-template-columns: fit-content(250px) fit-content(250px) 1fr;
 gap: 5px;
 border: 5px solid #42c6b3;
}
.grid-container div{
  background-color: #3e3737;
  text-align: center;
  color: white;
  font-size:15px;
  line-height: 40px;
}
</style>
</head>
<body>
<div className="grid-container">
  <div>less content then specified</div>
  <div>My content is more then specified width(250px). So it uses next line after exceeding 250px width</div>
  <div>3</div>
</div>
</body>
</html>

  • Grid Extra Properties
❮ Prev Grid Child Properties
Next ❯Grid Extra Properties
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯