*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
body{
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333;
background: #f5f5f5;
}
.container {
max-width: 960px;
margin: 1px auto;
padding: 10px;
display:grid;
grid-template-columns: 100px 200px;
}
.item {background: steelblue;
color:#fff;
font-size: 20px;
padding: 20px;
border: skyblue 1px solid;
}
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
.container2 {
max-width: 960px;
margin: 1px auto;
padding: 1px;
display:grid;
grid-template-columns: 100px 200px;
}
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
.container3 {
max-width: 960px;
margin: 1px auto;
padding: 1px;
display:grid;
grid-template-columns: 100px 200px 300px;
}
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
.container4 {
max-width: 960px;
margin: 1px auto;
padding: 1px;
display:grid;
grid-template-columns: 30% 40% 30%;
}
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
.container5 {
max-width: 960px;
margin: 1px auto;
padding: 1px;
display:grid;
grid-template-columns: 1fr 1fr;
}
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
.container6 {
max-width: 960px;
margin: 1px auto;
padding: 1px;
display:grid;
grid-template-columns: 1fr 1fr 2fr;
}
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
.container7 {
max-width: 960px;
margin: 1px auto;
padding: 1px;
display:grid;
grid-template-columns: 1fr 3fr 2fr;
}
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
.container8 {
max-width: 960px;
margin: 1px auto;
padding: 1px;
display:grid;
grid-template-columns: repeat(3, 1fr);
}
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
.container9 {
max-width: 960px;
margin: 1px auto;
padding: 1px;
display:grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 10px;
}
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
.container10 {
max-width: 960px;
margin: 1px auto;
padding: 1px;
display:grid;
grid-template-columns: repeat(3, 1fr);
row-gap: 10px;
}
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
.container11 {
max-width: 960px;
margin: 1px auto;
padding: 1px;
display:grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 10px;
}
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
.container12 {
max-width: 960px;
margin: 1px auto;
padding: 1px;
display:grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 10px;
row-gap: 10px;
}
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
body{
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333;
background: #f5f5f5;
}
.item {background: steelblue;
color:#fff;
font-size: 20px;
padding: 20px;
border: skyblue 1px solid;
}
.container13 {
max-width: 960px;
margin: 1px auto;
padding: 1px;
display:grid;
grid-template-columns: repeat(3, 1fr);
/*column-gap: 10px;
row-gap: 10px;*/
gap: 10px;
}
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Row height expands dynamically to fit text..
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam nobis repellendus assumenda deserunt perspiciatis labore, exercitationem nisi ipsa, nihil earum culpa quis quidem tempore Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam nobis repellendus assumenda deserunt perspiciatis labore, exercitationem nisi ipsa, nihil earum culpa quis quidem tempore
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
.container14 {
max-width: 960px;
margin: 1px auto;
padding: 1px;
display:grid;
grid-template-columns: repeat(3, 1fr);
/*column-gap: 10px;
row-gap: 10px;*/
gap: 10px;
grid-auto-rows: minmax(100px,auto);
}
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam nobis repellendus assumenda deserunt perspiciatis labore, exercitationem nisi ipsa, nihil earum culpa quis quidem tempore Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam nobis repellendus assumenda deserunt perspiciatis labore, exercitationem nisi ipsa, nihil earum culpa quis quidem tempore
.container15 {
max-width: 960px;
margin: 1px auto;
padding: 1px;
display:grid;
grid-template-columns: repeat(3, 1fr);
/*column-gap: 10px;
row-gap: 10px;*/
gap: 10px;
grid-auto-rows: minmax(200px,auto);
}
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam nobis repellendus assumenda deserunt perspiciatis labore, exercitationem nisi ipsa, nihil earum culpa quis quidem tempore Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam nobis repellendus assumenda deserunt perspiciatis labore, exercitationem nisi ipsa, nihil earum culpa quis quidem tempore
.container16 {
max-width: 960px;
margin: 1px auto;
padding: 1px;
display:grid;
grid-template-columns: repeat(3, 1fr);
/*column-gap: 10px;
row-gap: 10px;*/
gap: 10px;
grid-auto-rows: 200px;
}
Row height cuts off text
Item 1
Item 2
Item 3
Item 4
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam nobis repellendus assumenda deserunt perspiciatis labore, exercitationem nisi ipsa, nihil earum culpa quis quidem tempore Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam nobis repellendus assumenda deserunt perspiciatis labore, exercitationem nisi ipsa, nihil earum culpa quis quidem tempore
Item 6
Item 7
Item 8
Item 9
.container17 {
max-width: 960px;
margin: 1px auto;
padding: 1px;
display:grid;
grid-template-columns: repeat(3, 1fr);
/*column-gap: 10px;
row-gap: 10px;*/
gap: 10px;
grid-auto-rows: minmax(100px, auto);
}
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
.container18 {
max-width: 960px;
margin: 1px auto;
padding: 1px;
display:grid;
grid-template-columns: repeat(3, 1fr);
/*column-gap: 10px;
row-gap: 10px;*/
gap: 10px;
grid-template-rows: repeat(3, 1fr);
}
Row defaults to 1fr(1 equal part) and repeats that action for 3 rows. Since 1 cell has a block of text, all rows will stretch to match it, based on 1 fr.
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam nobis repellendus assumenda deserunt perspiciatis labore, exercitationem nisi ipsa, nihil earum culpa quis quidem tempore Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam nobis repellendus assumenda deserunt perspiciatis labore, exercitationem nisi ipsa, nihil earum culpa quis quidem tempore
Item 8
Item 9
Removing the sample text, we can see the default row height produced by:
grid-template-rows: repeat(3, 1fr);
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 8
Item 9
.container19 {
max-width: 960px;
margin: 1px auto;
padding: 1px;
display:grid;
grid-template-columns: repeat(3, 1fr);
/*column-gap: 10px;
row-gap: 10px;*/
gap: 10px;
align-items: stretch; /*default - stretches to fit content*/
}
x
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam nobis repellendus assumenda deserunt perspiciatis labore, exercitationem nisi ipsa, nihil earum culpa quis quidem tempore Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam nobis repellendus assumenda deserunt perspiciatis labore, exercitationem nisi ipsa, nihil earum culpa quis quidem tempore
Item 8
Item 9
.container20 {
max-width: 960px;
margin: 1px auto;
padding: 1px;
display:grid;
grid-template-columns: repeat(3, 1fr);
/*column-gap: 10px;
row-gap: 10px;*/
gap: 10px;
align-items: center;
}
x
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam nobis repellendus assumenda deserunt perspiciatis labore, exercitationem nisi ipsa, nihil earum culpa quis quidem tempore Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam nobis repellendus assumenda deserunt perspiciatis labore, exercitationem nisi ipsa, nihil earum culpa quis quidem tempore
Item 8
Item 9
.container21 {
max-width: 960px;
margin: 1px auto;
padding: 1px;
display:grid;
grid-template-columns: repeat(3, 1fr);
/*column-gap: 10px;
row-gap: 10px;*/
gap: 10px;
align-items: end;
}
x
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam nobis repellendus assumenda deserunt perspiciatis labore, exercitationem nisi ipsa, nihil earum culpa quis quidem tempore Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam nobis repellendus assumenda deserunt perspiciatis labore, exercitationem nisi ipsa, nihil earum culpa quis quidem tempore
Item 8
Item 9
.container22 {
max-width: 960px;
margin: 1px auto;
padding: 1px;
display:grid;
grid-template-columns: repeat(3, 1fr);
/*column-gap: 10px;
row-gap: 10px;*/
gap: 10px;
align-items: end;
grid-template-columns: repeat(3, 100px);
}
x
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam nobis repellendus assumenda deserunt perspiciatis labore, exercitationem nisi ipsa, nihil earum culpa quis quidem tempore Lorem ipsum dolor sit
Item 8
Item 9
.container23 {
max-width: 960px;
margin: 1px auto;
padding: 1px;
display:grid;
grid-template-columns: repeat(3, 100px);
/*column-gap: 10px;
row-gap: 10px;*/
gap: 10px;
align-items: end;
justify-content: end;
}
x
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam nobis repellendus assumenda deserunt perspiciatis labore, exercitationem nisi ipsa
Item 8
Item 9
.container24 {
max-width: 960px;
margin: 1px auto;
padding: 1px;
display:grid;
grid-template-columns: repeat(3, 1fr);
/*column-gap: 10px;
row-gap: 10px;*/
gap: 10px;
align-items: end;
justify-content: center;
}
x
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam nobis repellendus assumenda deserunt perspiciatis labore, exercitationem nisi ipsa
Item 8
Item 9
.container25 {
max-width: 960px;
margin: 1px auto;
padding: 1px;
display:grid;
grid-template-columns: repeat(3, 1fr);
/*column-gap: 10px;
row-gap: 10px;*/
gap: 10px;
align-items: end;
justify-content: space-around;
}
x
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam nobis repellendus assumenda deserunt perspiciatis labore, exercitationem nisi ipsa
Item 8
Item 9
squirrelworks