help me please, how do i get a result like this in the grid? the result i want - link - img https://ibb.co/XbW025V . here is my code https://jsfiddle.net/o0zjuyqb/1/
<div class="container">
<div class="parent">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
<div class="div6"></div>
</div>
</div>
You can do this by using grid-column: span 2;
.grid {
display: grid;
grid-auto-flow: dense;
grid-template-columns: 250px 290px 290px 250px;
grid-template-rows: repeat(2, 280px);
gap: 40px;
}
.grid div {
background: grey;
}
.grid div.wide {
grid-column: span 2;
background: green;
}
<div class="grid">
<div class="wide"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="wide"></div>
</div>
Related
I have a 2 column layout with an image to the left and wanted to have 3 divs on the right but can only manage to get 1 div to align next to the image and the other 3 divs are below the image. How can I have all 3 divs next to the image?
I know this is easy with grid-areas but wanted to do it with out.
.wrapper {
background-color: pink;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto auto 1fr;
}
.hero {
background-color: red;
}
.foo {
background-color: orange;
}
.bar {
background-color: lime;
}
.baz {
background-color: aqua;
}
img {
width: 100%;
display: block;
}
<div class="wrapper">
<div class="hero">
<img src="https://via.placeholder.com/1080x1080" alt="">
</div>
<div class="foo">
foo
</div>
<div class="bar">
bar
</div>
<div class="baz">
baz
</div>
</div>
https://codepen.io/emmabbb/pen/oNqPwad
Set a specific grid row value on your hero: grid-row: 1 / 4;
Like this:
.wrapper {
background-color: pink;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto auto 1fr;
}
.hero {
background-color: red;
grid-row: 1 / 4;
}
.foo {
background-color: orange;
}
.bar {
background-color: lime;
}
.baz {
background-color: aqua;
}
img {
width: 100%;
display: block;
}
<div class="wrapper">
<div class="hero">
<img src="https://via.placeholder.com/1080x1080" alt="">
</div>
<div class="foo">
foo
</div>
<div class="bar">
bar
</div>
<div class="baz">
baz
</div>
</div>
If you want your divs with text in them to be of equal height change the grid template rows to grid-template-rows: 1fr 1fr 1fr; Like this:
.wrapper {
background-color: pink;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr 1fr 1fr;
}
.hero {
background-color: red;
grid-row: 1 / 4;
}
.foo {
background-color: orange;
}
.bar {
background-color: lime;
}
.baz {
background-color: aqua;
}
img {
width: 100%;
display: block;
}
<div class="wrapper">
<div class="hero">
<img src="https://via.placeholder.com/1080x1080" alt="">
</div>
<div class="foo">
foo
</div>
<div class="bar">
bar
</div>
<div class="baz">
baz
</div>
</div>
I believe the easiest way to get the 3 divs on the right of the image without using grid area would be to wrap foo, bar, and baz in a parent div and use 1 row on your grid; you may have to mess with the hight of the divs on the right though.
<div class="wrapper">
<div class="hero">
<img src="https://via.placeholder.com/1080x1080" alt="">
</div>
<div>
<div class="foo">
foo
</div>
<div class="bar">
bar
</div>
<div class="baz">
baz
</div>
</div>
</div>
I hope that does what your looking for!
I want to make a grid in footer where the text is above the grid but also staying in the grid. Position: absolute don't work because it effects both grid and text, and i want to move them independently of each other.
How it looks:
https://i.imgur.com/norbzp1.png
How i want it to be:
https://i.imgur.com/1fYoQIF.png
Code:
<div class="footer">Footer
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
</div>
And css:
.footer{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-rows: 50px;
grid-gap: 10px;
}
.icon{
display: flex;
background: rgb(160, 84, 84);
}
You can achieve this by wrapping the grid and the footer with a container.
.footer-header {
text-align: center;
padding:20px;
}
.footer-grid {
grid-column: span 3 / auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-rows: 50px;
grid-gap: 10px;
}
.icon{
display: flex;
background: rgb(160, 84, 84);
}
<div class="footer">
<div class="footer-header">
Footer
</div>
<div class="footer-grid">
<div class="icon">1</div>
<div class="icon">2</div>
<div class="icon">3</div>
<div class="icon">4</div>
<div class="icon">5</div>
<div class="icon">6</div>
</div>
</div>
Also you can use grid-template-areas, for example
.footer{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas: "footer-head footer-head footer-head";
grid-auto-rows: 50px;
grid-gap: 10px;
}
.icon{
display: flex;
background: rgb(160, 84, 84);
}
.footer-head {
text-align: center;
grid-area: footer-head;
}
<div class="footer">
<div class="footer-head">Footer</div>
<div id="icon1" class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
</div>
sorry I'm very new to grid-layout
I have a layout that I believe it is really easy for grid system
but I have no idea how to modify it for my layout:
the layout has three type:
if only one item: full width, full height
if two items, left and right; 50% width, full height
if three items, correct code is below
.container {
display: grid;
width: 200px;
height: 200px;
grid-template-columns: 1fr 1fr;
grid-template-rows: 50% 50%;
grid-gap: 8px;
}
.a {
grid-column: 1;
grid-row: 1 / 3;
background: red;
}
.b {
grid-column: 2;
grid-row: 1;
background: blue;
}
.c {
grid-column: 2;
grid-row: 2;
background: green;
}
<div class="container">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
code above is for type 3 and is really correct
how should I modify it let it fit type 1 and 2 ??
You can do it like below:
.container {
display: inline-grid;
margin:5px;
vertical-align:top;
width: 200px;
height: 200px;
grid-gap: 8px;
}
.a { background: red;}
.b { background: blue;}
.c { background: green;}
/* when 2 items we add another column*/
.container :nth-child(2):nth-last-child(1) {
grid-column:2;
}
/* when 3 items we add another row as well */
.container :nth-child(3):nth-last-child(1) {
grid-row:2;
grid-column:2;
}
/* when 3 items, the first one will span 2 rows*/
.container :first-child:nth-last-child(3) {
grid-row:span 2;
}
<div class="container">
<div class="a"></div>
</div>
<div class="container">
<div class="b"></div>
</div>
<div class="container">
<div class="c"></div>
</div>
<div class="container">
<div class="a"></div>
<div class="b"></div>
</div>
<div class="container">
<div class="b"></div>
<div class="c"></div>
</div>
<div class="container">
<div class="a"></div>
<div class="c"></div>
</div>
<div class="container">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
Lets suppose I have parent container with fixed height:
.container {
max-height: 100px;
}
This container contains a grid, which has to be take the whole height, and if cell's content doesn't fit, it has to be scrollable.
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: minmax(1px, 1fr) minmax(1px, 1fr);
}
But if content of grid's cells is too big vertically, the grid is blowout the parent container, and I have no idea how to fix it.
minmax doesn't work for me in this case.
Example code:
.container {
min-height: 0;
max-height: 100px;
border: 1px solid red;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: minmax(1px, 1fr) minmax(1px, 1fr);
}
.grid>* {
overflow-y: auto;
border: 1px solid blue;
}
.grid .left {
grid-column: 1;
grid-row: 1 / span 2;
}
.grid .right-top {
grid-column: 2;
grid-row: 1;
}
.grid .right-bottom {
grid-column: 2;
grid-row: 2;
}
<div class="container">
<div class="grid">
<div class="left">
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
</div>
<div class="right-top">
Right Top Content
</div>
<div class="right-bottom">
Right Bottom Content
</div>
</div>
</div>
You may add max-height: inherit; to the .grid so it can inherit the max height to make the overflow works properly.
Ultimately you want to restrict height of the .grid instead of the container, since it's the children of the .grid needs to be scrollable, not .container.
.container {
min-height: 0;
max-height: 100px;
border: 1px solid red;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: minmax(1px, 1fr) minmax(1px, 1fr);
/* added */
max-height: inherit;
}
.grid > * {
overflow-y: auto;
border: 1px solid blue;
}
.grid .left {
grid-column: 1;
grid-row: 1/span 2;
}
.grid .right-top {
grid-column: 2;
grid-row: 1;
}
.grid .right-bottom {
grid-column: 2;
grid-row: 2;
}
<div class="container">
<div class="grid">
<div class="left">
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
</div>
<div class="right-top">
Right Top Content<br>
Right Top Content<br>
Right Top Content<br>
Right Top Content<br>
Right Top Content<br>
Right Top Content<br>
Right Top Content<br>
</div>
<div class="right-bottom">
Right Bottom Content
</div>
</div>
</div>
Simply make the parent a flexbox container
.container {
display:flex;
max-height: 100px;
border: 1px solid red;
}
.grid {
width:100%;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: minmax(1px, 1fr) minmax(1px, 1fr);
}
.grid>* {
overflow-y: auto;
border: 1px solid blue;
}
.left {
grid-column: 1;
grid-row: 1 / span 2;
}
.right-top {
grid-column: 2;
grid-row: 1;
}
.right-bottom {
grid-column: 2;
grid-row: 2;
}
<div class="container">
<div class="grid">
<div class="left">
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
</div>
<div class="right-top">
Right Top Content
</div>
<div class="right-bottom">
Right Bottom Content
</div>
</div>
</div>
I'm making a portfolio, using Grid CSS for the first time. I'm pretty new on this, and have a question about grid-row. I never saw the solution on Internet, so that's why I'm asking it here.
I have a container, that has different boxes with the same size. I would like to extend the number of boxes with JavaScript (dynamic). My problem is : Do I need to write a grid-row-end, even if I don't know the height of the container because I actually don't know how many boxes I'll have ?
I made a preview of my problem, here's a preview.
* {
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, roboto, sans-serif;
background: #222f3e;
color: #c8d6e5;
}
.container {
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-auto-rows: 5rem;
grid-gap: 3rem 2rem;
}
.container header,
.container footer {
background: #576574;
grid-column: 1 / span 10;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.container header {
grid-row: 2 / span 1;
}
.container .content {
grid-column: auto / span 10;
background: #8395a7;
grid-row: auto / span 10;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: 2.5rem;
grid-gap: 2.5rem 2.5rem;
grid-auto-flow: row;
}
.container .content .box {
grid-column: auto / span 3;
grid-row: auto / span 5;
background: #ff6b6b;
}
.container footer {
grid-row: auto / span 2;
}
<div class="container">
<header>
<h1> Grid CSS </h1>
</header>
<div class="content">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<footer>
<h2> Mon Footer </h2>
</footer>
</div>
Thanks a lot !
Louis
You don't need to define all those templates. Make it simple and rely on height since you know exactly how tall each item should be and keep the content one auto:
body {
background: #222f3e;
color: #c8d6e5;
margin:0;
}
.container {
display: grid;
padding-top:8rem;
grid-row-gap: 3rem;
}
.container header, .container footer {
background: #576574;
display: flex;
align-items: center;
justify-content: center;
}
.container header {
height:5rem;
}
.container .content {
background: #8395a7;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 2.5rem;
}
.container .content .box {
height:22.5rem;
background: #ff6b6b;
}
.container footer {
height:13rem;
}
<div class="container">
<header>
<h1> Grid CSS </h1>
</header>
<div class="content">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<footer>
<h2> Mon Footer </h2>
</footer>
</div>
Set the grid-auto-rows of the .container's to minmax(5rem, max-content);:
* {
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, roboto, sans-serif;
background: #222f3e;
color: #c8d6e5;
}
.container {
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-auto-rows: minmax(5rem, max-content);
grid-gap: 3rem 2rem;
}
.container header,
.container footer {
background: #576574;
grid-column: 1 / span 10;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.container header {
grid-row: 2 / span 1;
}
.container .content {
grid-column: auto / span 10;
background: #8395a7;
grid-row: auto / span 10;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: 2.5rem;
grid-gap: 2.5rem 2.5rem;
grid-auto-flow: row;
}
.container .content .box {
grid-column: auto / span 3;
grid-row: auto / span 5;
background: #ff6b6b;
}
.container footer {
grid-row: auto / span 2;
}
<div class="container">
<header>
<h1> Grid CSS </h1>
</header>
<div class="content">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<footer>
<h2> Mon Footer </h2>
</footer>
</div>