I’m looking for a way to represent the next layout using purely CSS Grid.
Layout image:
https://i.stack.imgur.com/rDxv3.jpg
My code:
<div class=“grid-layout”>
<div class=“item”>1</div>
<div class=“item”>2</div>
<div class=“item”>3</div>
<div class=“item”>4</div>
</div>
simply like below:
.grid-layout {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
height:500px;
}
.grid-layout > * {
border:2px solid;
}
.grid-layout > :first-child {
grid-area:span 3/span 3;
}
<div class="grid-layout">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
If you want always square try this:
.grid-layout {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
}
.grid-layout > * {
border:2px solid;
display:flex;
}
.grid-layout > *:before {
content:"";
padding-top:100%;
}
.grid-layout > :first-child {
grid-area:span 3/span 3;
}
<div class="grid-layout">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
Each of the child div would need to have the respective class name that the following CSS has. Increase and decrease the gap to the needed size,(1st value is the gap between rows and the 2nd is the gap between cols)
.grid-layout {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 5px 5px;
grid-template-areas: "item-1 item-1 item-2" "item-1 item-1 item-3" "item-1 item-1 item-4";
}
.item-1 {
grid-area: item-1;
}
.item-2 {
grid-area: item-2;
}
.item-3 {
grid-area: item-3;
}
.item-4 {
grid-area: item-4;
}
Related
I want to create layout where the last element is centered. I should do with grids, but cant center the last element
Desired view
.box {
min-width: 50px;
min-height:50px;
background: red;
margin: 5px;
}
.container {
width: 200px;
display: grid;
grid-template-columns: auto auto auto;
}
.box7 {
grid-column-start: 2;
grid-row-start: 3;
grid-column-end: 4;
}
<div class='container'>
<div class='box'>1</div>
<div class='box'>2</div>
<div class='box'>3</div>
<div class='box'>4</div>
<div class='box'>5</div>
<div class='box'>6</div>
<div class='box box7'>7</div>
<div>
Desired view
.box {
min-height: 50px;
background: red;
margin: 5px;
grid-column: span 2;
}
.container {
width: 200px;
display: grid;
grid-template-columns: repeat(6, 1fr);
}
.box7 {
grid-column-start: 2;
grid-column-end: 6;
}
<div class='container'>
<div class='box'>1</div>
<div class='box'>2</div>
<div class='box'>3</div>
<div class='box'>4</div>
<div class='box'>5</div>
<div class='box'>6</div>
<div class='box box7'>7</div>
<div>
You can also find multiple ways on this discussion
I hope this approach of mine will help you:
.box {
min-width: 50px;
min-height:50px;
background: red;
margin: 5px;
}
.container {
width: 200px;
display: grid;
grid-template-rows: repeat(3, [row] auto );
grid-template-columns: repeat(3, [col] auto) ;
}
.subgrid {
grid-column: col / span 3;
grid-row: row 3;
}
.box7
{
width:66%;
margin-left:auto;
margin-right:auto;
}
<div class='container'>
<div class='box'>1</div>
<div class='box'>2</div>
<div class='box'>3</div>
<div class='box'>4</div>
<div class='box'>5</div>
<div class='box'>6</div>
<div class="subgrid">
<div class='box box7'>7</div>
</div>
<div>
I have an element which I want to use the 100% of the height available on a grid-layout design.
What I have is this:
.wrapper {
background: #F7F7F7 !important;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 15px;
grid-template-areas: "a b c" "d e f";
}
.one {
grid-area: a;
}
.two {
grid-area: b;
}
.three {
grid-area: c;
}
.four {
grid-area: d;
}
.five {
grid-area: e;
}
.six {
grid-area: f;
}
<div class="wrapper">
<div class="one">
<image height="100%">
</div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
<div class="six"></div>
</div>
How can I do to have the image with a height that uses the 100% of the one height available?
Thanks!
You can give a class to it and make it's width and height 100%
.wrapper {
background:#000 !important;
width:100%;
height:100vh;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 15px;
padding:20px;
grid-template-areas:
"a b c"
"d e f";
}
.scene{
width:100%;
height:100%;
}
.white{
background:#fff;
}
.one{
grid-area:a;
}
.two{
grid-area:b;
}
.three{
grid-area:c;
}
.four{
grid-area:d;
}
.five{
grid-area:e;
}
.six{
grid-area:f;
}
<div class="wrapper">
<div class="one white"><img src='https://res.cloudinary.com/demo/image/upload/v1312461204/sample.jpg' class='scene'/></div>
<div class="two white"></div>
<div class="three white"><img src='https://res.cloudinary.com/demo/image/upload/v1312461204/sample.jpg' class='scene'/></div>
<div class="four white"></div>
<div class="five white"><img src='https://res.cloudinary.com/demo/image/upload/v1312461204/sample.jpg' class='scene'/></div>
<div class="six white" ></div>
</div>
I've got the following setup:
section {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 1fr 1fr;
grid-column-gap: 1em;
}
.a {
background-color: green;
grid-column: 1/7;
griw-row: 1;
}
.b {
background-color: grey;
grid-column: 7/-1;
grid-row: 1;
}
.c {
background-color: blue;
grid-column: 1/7;
grid-row: 2;
}
.d {
background-color: yellow;
grid-column: 7/-1;
grid-row: 2;
}
<section>
<div class="b">
Content b
</div>
<div class="c">
Content c
</div>
<div class="d">
Content d
</div>
</section>
The element with css class .a is dynamic and not always available. How can I shift right column (.b) to the left when .a column is not available?
Note: I can't use grid-auto-columns as IE11 doesn't support it.
Don't explicitly define the column positions. Simply set the number of column and the auto placement will do the job for you:
section {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 1fr 1fr;
grid-column-gap: 1em;
margin: 5px;
}
section > * {
grid-column: span 6; /* all the items should take 6 columns*/
}
.a {
background-color: green;
}
.b {
background-color: grey;
}
.c {
background-color: blue;
grid-row: 2;
}
.d {
background-color: yellow;
grid-row: 2;
}
<section>
<div class="b">
Content b
</div>
<div class="c">
Content c
</div>
<div class="d">
Content d
</div>
</section>
<section>
<div class="a">
Content a
</div>
<div class="b">
Content b
</div>
<div class="c">
Content c
</div>
<div class="d">
Content d
</div>
</section>
I have the following HTML/CSS
.main {
display: grid;
grid-template-columns: 2fr 1fr;
}
/* The following is not essential - for decoration purposes only */
.left {
background-color: green;
}
.right {
background-color: orange;
}
<div class="main">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
Now, sometimes, and depending on the div with class main, sometimes I do not have the div with the class right (in other words, the html might look like this
.main {
display: grid;
grid-template-columns: 2fr 1fr;
}
/* The following is not essential - for decoration purposes only */
.left {
background-color: green;
}
.right {
background-color: orange;
}
<div class="main">
<div class="left">Left</div>
</div>
What I like to do is write the CSS code in a way that expands div.left to the full width of the container div.main if div.right does not exist. How can I do that?
You can rely on implicit grid creation:
.main {
display: grid;
grid-template-columns: 2fr;
grid-auto-columns:1fr; /* this will trigger when you add the "right" element */
grid-auto-flow:column;
margin:5px;
}
.left {
background-color: green;
}
.right {
background-color: orange;
}
<div class="main">
<div class="left">Left</div>
<div class="right">right</div>
</div>
<div class="main">
<div class="left">Left</div>
</div>
It does also work if you want to remove left:
.main {
display: grid;
grid-template-columns: 2fr;
grid-auto-columns:1fr; /* this will trigger when you add the "left" element */
grid-auto-flow:column;
margin:5px;
}
.left {
background-color: green;
grid-column-end:1; /* added this */
}
.right {
background-color: orange;
}
<div class="main">
<div class="left">Left</div>
<div class="right">right</div>
</div>
<div class="main">
<div class="right">right</div>
</div>
This is something better suited to flexbox but if your structure is as simplistic as you indicate the only-child can be used here.
.main {
display: grid;
grid-template-columns: 2fr 1fr;
margin-bottom: 1em;
}
/* The following is not essential - for decoration purposes only */
.left {
background-color: green;
height: 25vh;
}
.left:only-child {
grid-column: 1 / -1;
}
.right {
background-color: orange;
}
<div class="main">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="main">
<div class="left">Left</div>
</div>
I'm trying to create a 2 x 2 image tile using css grid. I'm want to make this dynamic so that no matter how many images are provided (between 1 and 4), the full space of the tile is used. So like this:
Ive got this kinda working with the following css and markup.
CSS
.container {
display: flex;
}
.container .grid-tiles {
margin-right: 20px;
}
.grid-tiles {
display: grid;
grid-template-columns: repeat(auto-fit, 38px);
grid-column-gap: 4px;
grid-row-gap: 4px;
width: 80px;
height: 80px;
}
.grid-tiles .grid-tile {
border-radius: 3px;
background-color: red;
}
/* Only one */
.grid-tile:only-child {
grid-area: 2 span / 2 span;
}
/* Three */
.grid-tile:first-child:nth-last-child(3) {
grid-area: 2 span;
}
HTML
<div class="grid-tiles">
<div class="grid-tile"></div>
<div class="grid-tile"></div>
<div class="grid-tile"></div>
<div class="grid-tile"></div>
</div>
But in some cases there needs to be text in a tile. When that happens the grid doesn't follow the sizing of the other instances:
I need the grid to be consistent. Anyone able to offer some help on how to ensure this / improvements to the grid properties? Thanks!
I've a Codepen of the current working.
Force all the columns/rows to be equal in size by using
grid-template-columns: 1fr 1fr; /* two equal columns */
grid-auto-rows: 1fr; /* all the rows equal */
Full code
.container {
display: flex;
}
.container .grid-tiles {
margin-right: 20px;
}
.grid-tiles {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 1fr;
gap: 4px;
width: 80px;
height: 80px;
}
.grid-tiles .grid-tile {
border-radius: 3px;
background-color: red;
}
/* Only one */
.grid-tile:only-child {
grid-area: span 2 / span 2;
}
/* Three */
.grid-tile:first-child:nth-last-child(3) {
grid-area: span 2;
}
<div class="container">
<div class="grid-tiles">
<div class="grid-tile"></div>
</div>
<div class="grid-tiles">
<div class="grid-tile"></div>
<div class="grid-tile"></div>
</div>
<div class="grid-tiles">
<div class="grid-tile"></div>
<div class="grid-tile"></div>
<div class="grid-tile"></div>
</div>
<div class="grid-tiles">
<div class="grid-tile"></div>
<div class="grid-tile"></div>
<div class="grid-tile"></div>
<div class="grid-tile"></div>
</div>
<div class="grid-tiles">
<div class="grid-tile"></div>
<div class="grid-tile"></div>
<div class="grid-tile"></div>
<div class="grid-tile">Zaa</div>
</div>
</div>