I have the following simple layout example using CSS grid
.container {
width: 100%;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr auto 1fr;
grid-template-columns: 1fr auto 1fr;
}
.item1 {
text-align:center;
background:red;
color:white;
padding:20px
}
.item2 {
text-align:center;
background:green;
color:white;
padding:20px
}
.item3 {
text-align:center;
background:blue;
color:white;
padding:20px
}
<div class="container">
<div class="item1">
Item 1
</div>
<div class="item2">
Item 2
</div>
<div class="item3">
Item 3
</div>
</div>
I have prefixed with ie specific prefixes but the grid is not working correctly in ie11. Am I missing a prefix?
Anyone any ideas why?
IE does not have auto-flow of grid elements. You need to assign a specific grid position to each grid element, otherwise each non-placed element ends up stacked in 1,1.
.container {
width: 100%;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr auto 1fr;
grid-template-columns: 1fr auto 1fr;
}
.item1 {
text-align: center;
background: red;
color: white;
padding: 20px;
-ms-grid-column: 1;
}
.item2 {
text-align: center;
background: green;
color: white;
padding: 20px;
-ms-grid-column: 2;
}
.item3 {
text-align: center;
background: blue;
color: white;
padding: 20px;
-ms-grid-column: 3;
}
<div class="container">
<div class="item1">
Item 1
</div>
<div class="item2">
Item 2
</div>
<div class="item3">
Item 3
</div>
</div>
Related
here's my html code
<div>
<div id="navbar" class="box">Navbar</div>
<div id="sidenav " class="box">Side Navbar</div>
<div id="main " class="box">Main</div>
<div id="footer " class="box">Footer</div>
</div>
and here's my scss code
div{
display: grid;
width:100%;
height: 100%;
grid-template-columns: 25% 75% 25%;
grid-gap: 15px;
grid-template-rows:25% 50% 25% ;
// grid-gap: 15px;
grid-template-areas:
"hd hd hd "
"sd ma ma "
"ft ft ft ";
.box{
display: flex;
// text-align: center;
border: 3px solid red;
/* width:150px;
height: 150px; */
margin: auto;
align-items: center;
justify-content: center;
}
#navbar{
grid-area: hd;
}
#sidenav{
grid-area: sd;
}
#main{
grid-area: ma;
}
#footer{
grid-area: ft;
}
}
the problem is the footer div doesn't display in the bottom here's a screenshot
what i want is to make the footer display at the bottom so what seems to be the problem here
There are some issues that I found in your code which makes the layout little wonky.
grid-template-columns: 25% 75% 25%;
The column total is more than 100%, so it will not work perfectly.
I would highly recommend you to use a CSS grid generator online like https://grid.layoutit.com/
For your layout, I would also not recommend structure 3x3 (columns and rows) - As from the image you shared above it looks like the following
1 row - For "Navbar" (this doesnt need any sub columns)
1 row - For Content -> this has 2 columns 1 for "SideNav" and 1 for "Main"
1 row - For "Footer" (again you dont need sub columns)
Based on this your HTML structure will end up looking like
<div class="container">
<div class="navbar">Navbar</div>
<div class="Content">
<div class="SideNav">Side Nav</div>
<div class="Main">Main</div>
</div>
<div class="Footer">Footer</div>
</div>
And your CSS will look like this
body{
padding: 0;
margin: 0;
}
.container {
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 25% 50% 25%;
gap: 0px 0px;
grid-template-areas:
"navbar"
"Content"
"Footer";
}
.navbar {
grid-area: navbar;
background-color: #f5f5f5;
padding: 16px;
text-align: center;
}
.Content {
display: grid;
grid-template-columns: 360px 1fr;
grid-template-rows: 1fr;
gap: 0px 0px;
grid-template-areas:
"SideNav Main";
grid-area: Content;
}
.SideNav {
grid-area: SideNav;
background-color: #e5e5e5;
padding: 16px;
}
.Main {
grid-area: Main;
background-color: salmon;
padding: 16px;
}
.Footer {
grid-area: Footer;
background-color: #d5d5d5;
padding: 16px;
text-align: center;
}
Here, if you check the code well, the container has 3 rows (25% - navbar, 50% - content, 25% - footer)
And then content has 2 columns (360px - Sidenav, 1fr - Main)
Hope this helps :)
You can also see the code live on my codepen : https://codepen.io/raunaqpatel/pen/WNyQqmm
Or here:
body{
padding: 0;
margin: 0;
}
.container {
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 25% 50% 25%;
gap: 0px 0px;
grid-template-areas:
"navbar"
"Content"
"Footer";
}
.navbar {
grid-area: navbar;
background-color: #f5f5f5;
padding: 16px;
text-align: center;
}
.Content {
display: grid;
grid-template-columns: 360px 1fr;
grid-template-rows: 1fr;
gap: 0px 0px;
grid-template-areas:
"SideNav Main";
grid-area: Content;
}
.SideNav {
grid-area: SideNav;
background-color: #e5e5e5;
padding: 16px;
}
.Main {
grid-area: Main;
background-color: salmon;
padding: 16px;
}
.Footer {
grid-area: Footer;
background-color: #d5d5d5;
padding: 16px;
text-align: center;
}
<div class="container">
<div class="navbar">Navbar</div>
<div class="Content">
<div class="SideNav">Side Nav</div>
<div class="Main">Main</div>
</div>
<div class="Footer">Footer</div>
</div>
I have this grid over here:
and i want the first big card to take the whole height of the wrapper and remain the same width, while the bottom two cards go to the right, somehow like this:
here's my css/html code where item-1 is the bigger card on the top-left:
.cards-wrapper {
background-color: #43cbff;
width: 1240px;
height: 380px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-gap: 20px;
#media (min-width: 30em) {
grid-template-columns: 1fr 1fr;
}
#media (min-width: 60em) {
grid-template-columns: repeat(4, 1fr);
}
}
.cards {
display: flex;
flex-direction: column;
min-height: 100%;
position: relative;
top: 0;
background-color: aquamarine;
border: 1px solid lightgrey;
border-radius: 8px;
}
.item-1 {
#media (min-width: 60em) {
grid-column: 1 / span 2;
h1 {
font-size: 24px;
}
}
}
You can keep the grid layout and use grid-template-areas to make that first item take up the full height whilst retaining its existing width.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-auto-columns: 1fr;
grid-auto-rows: 1fr;
gap: 8px 8px;
grid-auto-flow: row;
grid-template-areas:
"one one two three"
"one one four five";
}
.container * {
background: orange;
}
.one { grid-area: one; }
.two { grid-area: two; }
.three { grid-area: three; }
.four { grid-area: four; }
.five { grid-area: five; }
<div class="container">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
</div>
Flex version
I dont know you entire structure and your requirement. But by using only flexbox you can archive this also quite easy.:
.cards-wrapper {
background: gray;
}
.flex {
display: flex;
gap:5px;
}
.left, .right {
width: 50%;
}
.right {
flex-wrap: wrap;
justify-content: center;
}
.right > div {
width: 49,2%;
background-color: lightgreen;
height:100px;
}
.big {
background-color: green;
width: 100%;
}
<div class="cards-wrapper flex">
<div class="left flex">
<div class="big">BIG</div>
</div>
<div class="right flex">
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</div>
.main-dev {
display: grid;
grid-template-columns: 50% 50%;
}
I want to arrange my grid into 50% 50% and 100% structures. I have attached the required output image.
Current output :
Expected Output :
.item {
border: 1px solid red;
text-align: center;
padding: 10px;
}
.main-dev {
display: grid;
grid-template-columns: 1fr 1fr;
width: 200px;
border: solid red 1px;
}
.item3 {
grid-column: 1 / 3;
/* or grid-column: 1 / span 2 */
}
<div class="main-dev">
<div class="item">1</div>
<div class="item">2</div>
<div class="item item3">3</div>
You can try this,
.item3 {
grid-column-start: 1;
grid-column-end: 3;
}
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
</div>
So. Let's imagine you have 3 items with class names item1, item2, item3.
Here is the style for them:
.item1 { grid-area: item1; }
.item2 { grid-area: item2; }
.item3 { grid-area: item3; }
div{
display: grid;
grid-template-areas:
'item1 item2'
'item3 item3'
grid-gap: 10px;}
First of all, you can use col-. Here is my example:
.red{
border: 1px solid red;
height:200px;
}
.col-6{
float:left;
width:50%;
}
.col-12{
float:left;
width:100%;
}
<body>
<div class="col-6">
<div class="red"></div>
</div>
<div class="col-6">
<div class="red"></div>
</div>
<div class="col-12">
<div class="red"></div>
</div>
</body>
And you can modify the code as you like.
I'm trying to create a layout that looks like this:
The blue blocks are divs. It's essentially a 3x3 grid but with gaps in the 3rd and 4th grid column.
How can I create a gap within CSS grid to achieve this layout? I've tried it with flexbox, but couldn't achieve the above, so hoping a grid layout is the answer.
Here's my code:
.container{
border: 1px solid;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 0px 0px;
grid-template-areas:
". . ."
". . .";
}
.item{
border: 1px solid lightgrey;
padding: 10px;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
CSS grid allows you to choose which row and column an element will start in (and indeed, though not needed in your case, how many columns/rows it is to span).
This snippet gives the 3rd and 4th children of the wrapper specific grid positions.
.container {
border: 1px solid;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 10px;
}
.item {
border: 1px solid lightgrey;
padding: 10px;
}
.item:nth-child(3) {
grid-column: 2;
grid-row: 2;
}
.item:nth-child(4) {
grid-column: 3;
grid-row: 2;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
Note: just for a demo it has also introduced a non-zero grid-gap. The grid-area settings have been removed as not needed if the above method is followed.
A simplified version of the CSS grid solution with only the necessary code:
.container{
border: 1px solid;
display: grid;
grid-auto-columns: 1fr;
grid-auto-rows: 1fr;
grid-gap:5px;
}
.item{
border: 1px solid lightgrey;
padding: 10px;
}
.item:nth-child(3) {
grid-column:2;
}
.item:nth-child(4) {
grid-column:3;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
How about padding/margin?
.container {
border: 1px solid #777;
display: inline-grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 0 0;
grid-template-areas:
". . ."
". . .";
}
.item {
border: 1px solid lightgrey;
padding: 2px 0;
width: 55px !important;
height: 50px !important;
margin: 1px !important;
background: #1657c9;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
color: white;
}
.item-text {
position: relative;
top: 38%;
margin: 0;
font-size: normal;
}
.item-3, .item-4 {
position: relative;
left: 100%;
}
<div class="container">
<div class="item item-1"><span class="item-text">1</span></div>
<div class="item item-2"><span class="item-text">2</span></div><br>
<div class="item item-3"><span class="item-text">3</span></div>
<div class="item item-4"><span class="item-text">4</span></div>
</div>
You can try this:
This is HTML:
<div class="parent">
<div class="div1"> </div>
<div class="div2"> </div>
<div class="div3"> </div>
<div class="div4"> </div>
</div>
and CSS
.parent {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
.div1 {
grid-area: 1 / 1 / 2 / 2;
background: blue;
height: 3rem;
margin: 1rem;
}
.div2 {
grid-area: 1 / 2 / 2 / 3;
background: blue;
height: 3rem;
margin: 1rem;
}
.div3 {
grid-area: 2 / 2 / 3 / 3;
background: blue;
height: 3rem;
margin: 1rem;
}
.div4 {
grid-area: 2 / 3 / 3 / 4;
background: blue;
height: 3rem;
margin: 1rem;
}
I'm trying to use CSS grid layout to simulate some responsive behavior, specifically with:
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
My example https://codepen.io/elgs/pen/goNxeL works well in Chrome, however, it doesn't seem to work in Firefox. You will find it when you resize the browser horizontally.
Another example https://codepen.io/elgs/pen/YYoxOq works well in both Chrome and Firefox.
html,body {
height: 100%;
width: 100%;
margin: 0 auto;
padding: 0;
}
body {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 100px 1fr 50px;
}
.header {
grid-column: 1/2;
grid-row: 1/2;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
background-color: #57324f;
}
.header .title {
grid-column: 1/2;
grid-row: 1/2;
align-self: center;
justify-self: center;
width: 100%;
max-width: 1000px;
color: aliceblue;
}
.footer {
grid-column: 1/2;
grid-row: 3/4;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
background-color: #57324f;
}
.footer .copyright {
grid-column: 1/2;
grid-row: 1/2;
align-self: center;
font-size: 12px;
justify-self: center;
width: 100%;
max-width: 1000px;
color: aliceblue;
}
.content {
grid-column: 1/2;
grid-row: 2/3;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 0;
background-color: aliceblue;
}
.content .main {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-gap: 10px;
grid-auto-flow: dense;
justify-self: center;
width: 100%;
margin-top: 10px;
max-width: 1000px;
}
.placeholder {
height: 100px;
position: relative;
border: 1px solid red;
}
<div class="header">
<div class="title">
<h2>Header</h2>
</div>
</div>
<div class="content">
<div class="main">
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
</div>
</div>
<div class="footer">
<div class="copyright">
<span>Footer</span>
</div>
</div>
I'm wondering whether I have done anything wrong or it's the browser's bug.
Firefox version: 58.0 (64-bit)
Chrome version: Version 64.0.3282.119 (Official Build) (64-bit)
This appears to be a bug in Firefox. But I'm not sure.
Here's what is clear:
The fact that you have nested grid containers matters.
Your second demo, which works in both Chrome and Firefox, has only one grid container.
The first demo, which only works in Chrome, has nested grid containers. If you eliminate that nesting, and use only one grid container, the layout works in both browsers.
So, as a possible cross-browser solution, minimize the nesting of grid containers.
In this revised demo, I've commented out display: grid on the body and .content elements. The only grid container left is on .main, the parent of the red boxes:
revised demo
html,
body {
height: 100%;
width: 100%;
margin: 0 auto;
padding: 0;
}
body {
/* display: grid; */
grid-template-columns: 1fr;
grid-template-rows: 100px 1fr 50px;
}
.header {
grid-column: 1/2;
grid-row: 1/2;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
background-color: #57324f;
}
.header .title {
grid-column: 1/2;
grid-row: 1/2;
align-self: center;
justify-self: center;
width: 100%;
max-width: 1000px;
color: aliceblue;
}
.footer {
grid-column: 1/2;
grid-row: 3/4;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
background-color: #57324f;
}
.footer .copyright {
grid-column: 1/2;
grid-row: 1/2;
align-self: center;
font-size: 12px;
justify-self: center;
width: 100%;
max-width: 1000px;
color: aliceblue;
}
.content {
grid-column: 1/2;
grid-row: 2/3;
/* display: grid; */
grid-template-columns: 1fr;
grid-template-rows: 0;
background-color: aliceblue;
}
.content .main {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-gap: 10px;
grid-auto-flow: dense;
justify-self: center;
width: 100%;
margin-top: 10px;
max-width: 1000px;
}
.placeholder {
height: 100px;
position: relative;
border: 1px solid red;
}
<div class="header">
<div class="title">
<h2>Header</h2>
</div>
</div>
<div class="content">
<div class="main">
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
</div>
</div>
<div class="footer">
<div class="copyright">
<span>Footer</span>
</div>
</div>
In Firefox, a fixed value on max-width prevents the box from shrinking to accommodate smaller screen sizes.
Firefox has a problem shrinking the .main container with a pixel value on the max-width. Chrome does not.
A typical solution that comes to mind is to override the min-width: auto default setting on grid items. This prevents items from shrinking past the size of their content or their defined width.
However, that solution, described here: Prevent content from expanding grid items ... doesn't work in this case.
(Probably because there is no content in and no defined widths on the grid items. The only widths defined are on the grid columns, set on the grid container. So the solution, which applies only to grid items, probably doesn't even apply.)
As a possible workaround, if you must keep the nested containers, then instead of using a fixed value with max-width, use a percentage value. That may work for you.
revised codepen
body {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 100px 1fr 50px;
height: 100vh;
margin: 0;
}
.header {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
background-color: #57324f;
}
.content {
display: grid;
grid-template-columns: 1fr;
/* grid-template-rows: 0; */
align-content: start; /* new */
background-color: aliceblue;
}
.content .main {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-auto-rows: 100px; /* new */
grid-gap: 10px;
grid-auto-flow: dense;
justify-self: center;
width: 100%;
margin-top: 10px;
/* max-width: 1000px; */
max-width: 75%; /* new */
}
.placeholder {
border: 1px solid red;
}
.footer {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
background-color: #57324f;
}
.header .title,
.footer .copyright {
align-self: center;
justify-self: center;
width: 100%;
max-width: 1000px;
color: aliceblue;
}
.footer .copyright {
font-size: 12px;
}
<div class="header">
<div class="title">
<h2>Header</h2>
</div>
</div>
<div class="content">
<div class="main">
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
</div>
</div>
<div class="footer">
<div class="copyright">
<span>Footer</span>
</div>
</div>