.item {
width: auto;
height: auto;
}
.container {
display: grid;
grid-template-columns: 200px 200px;
grid-template-rows: 100px 100px;
}
.item {
width: auto;
height: auto;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.container {
display: grid;
grid-template-columns: repeat(3, minmax(30px, auto));
}
.container {
display: grid;
grid-template-columns: minmax(50%, 80%) 1fr 1fr;
}
.container {
display: grid;
grid-template-columns: repeat(3, minmax(30px, 100px));
width: 100px;
}
.container {
display: grid;
grid-template-columns: repeat(3, minmax(30px, 100px));
width: 400px;
}
.container {
gap: 0;
}
.item {
width: auto;
height: auto;
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0px;
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10%;
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px 10px;
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20% 10%;
}
.item {
width: auto;
height: auto;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.item1 {
grid-row-start: 1;
grid-row-end: 3;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
.item1 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
}
.item2 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 3;
grid-row-end: 4;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
.item1 {
grid-column: 2 / 3;
grid-row: 1 / 3;
}
.item2 {
grid-column: 1 / 3;
grid-row: 3 / 4;
}
grid1
grid2
grid3
grid4
grid5
grid6
grid7
.item {
width: auto;
height: auto;
}
.item {
background-color: var(--primary-3);
}
.item1, .item2 {
background-color: var(--primary-5);
}
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
.item1 {
grid-area: 1 / 2 / 3 / 3;
}
.item2 {
grid-area: 3 / 1 / 4 / 3;
}
header
main
sidebar
footer
.item {
width: auto;
min-height: 80px;
height: auto;
}
.item3, .item4 {
background-color: #fff0e6;
color: #765451;
}
.container {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-template-areas:
"header header header header header"
"main main main side side"
"footer footer footer footer footer";
}
.item1 {
grid-area: header;
}
.item2 {
grid-area: main;
}
.item3 {
grid-area: side;
}
.item4 {
grid-area: footer;
}