I am using CSS Grid layout to have a 3 column layout. Even though I have mentioned the list1 to span across 3 rows, the list1 is only spanning one row.
.wrapper {
max-width: 940px;
margin: 0 auto;
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr)[3];
grid-template-columns: repeat(3, 1fr);
}
.wrapper>div {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
padding: 1em;
color: #5a2916;
}
.item1 {
-ms-grid-column: 1;
grid-column-start: 1;
grid-column-end: 4;
-ms-grid-row: 1;
grid-row-start: 1;
grid-row-end: 3;
}
.item2 {
-ms-grid-column: 1;
grid-column-start: 1;
-ms-grid-row: 3;
grid-row-start: 3;
grid-row-end: 5;
}
<div class="wrapper">
<div class="item1">One</div>
<div class="item2">Two</div>
<div class="item3">Three</div>
<div class="item4">Four</div>
<div class="item5">Five</div>
</div>
Please let me know where I am going wrong.
Add a grid-auto-rows property to your grid. Like:
grid-auto-rows: 50px;
.wrapper {
max-width: 940px;
margin: 0 auto;
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr)[3];
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 50px;
}
.wrapper>div {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
padding: 1em;
color: #5a2916;
}
.item1 {
-ms-grid-column: 1;
grid-column-start: 1;
grid-column-end: 4;
-ms-grid-row: 1;
grid-row-start: 1;
grid-row-end: 3;
}
.item2 {
-ms-grid-column: 1;
grid-column-start: 1;
-ms-grid-row: 3;
grid-row-start: 3;
grid-row-end: 5;
}
<div class="wrapper">
<div class="item1">One</div>
<div class="item2">Two</div>
<div class="item3">Three</div>
<div class="item4">Four</div>
<div class="item5">Five</div>
</div>
I think you ought to add in wrapper class definition how many rows you want your wrapper to span.
When I added this grid-template-rows: repeat(5, 1fr); item1 went from one to three rows.
Related
In a grid container with 1 column and 1 row, If I have an implicit column on the 1st row, how do I get an element in the second row (the green column in the example) to span both the explicit and implicit columns? Thanks in advance
*{
margin: 0;
padding: 0;
color: white;
padding: 0.6em
}
.grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 2fr;
grid-auto-columns: auto;
}
button {
background-color: red;
grid-row-start: 1;
grid-column-start: 2;
grid-column-end: 3;
}
header {
background-color: blue;
grid-row-start: 1;
}
p {
background-color: green;
grid-column-start: 1;
grid-column-end: -1;
width: 100%;
}
<div class="grid">
<header>title</header>
<button>button</button>
<p>paragraph</p>
</div>
*{
margin: 0;
padding: 0;
color: white;
padding: 0.6em
}
.grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 2fr;
grid-auto-columns: auto;
}
button {
background-color: red;
grid-row-start: 1;
grid-column-start: 2;
grid-column-end: 3;
}
header {
background-color: blue;
grid-row-start: 1;
}
p {
background-color: green;
grid-column-start: 1;
grid-column-end: 3; /*This is what changed*/
}
<div class="grid">
<header>title</header>
<button>button</button>
<p>paragraph</p>
</div>
Since the implicit column is an auto one, you can make explicit and simplify your code like below
* {
padding: 0.6em
}
.grid {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: 2fr;
color: white;
}
button {
background-color: red;
}
header {
background-color: blue;
}
p {
background-color: green;
grid-column: 1/-1;
}
<div class="grid">
<header>title</header>
<button>button</button>
<p>paragraph</p>
</div>
<div class="grid">
<header>title</header>
<p>paragraph</p>
</div>
So I'm trying to create the below image with CSS grid. min-content and auto doesn't seem to be playing nice. Here is a fiddle! https://jsfiddle.net/pw9L52h0/
HTML:
<div class="grid">
<div class="label-1">label 1</div>
<div class="label-2">label 2</div>
<div class="label-3">label 3</div>
<div class="label-4">label 4</div>
<div class="label-5">label 5</div>
<div class="label-6">label 6</div>
<div class="label-7">label 7</div>
</div>
CSS:
.grid {
display: grid;
grid-template-rows: 60px min-content auto;
grid-template-columns: 60px min-content auto;
width: 230px;
height: 230px;
background-color: lightgray;
}
.label-1 {
grid-row-start: 0;
grid-row-end: 1;
grid-column-start: 0;
grid-column-end: 1;
background-color: red;
}
.label-2 {
grid-row-start: 0;
grid-row-end: 1;
grid-column-start: 1;
grid-column-end: 3;
background-color: green;
}
.label-3 {
grid-row-start: 1;
grid-row-end: 3;
grid-column-start: 0;
grid-column-end: 1;
background-color: blue;
}
.label-4 {
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 1;
grid-column-end: 2;
background-color: yellow;
}
.label-5 {
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 2;
grid-column-end: 3;
background-color: orange;
}
.label-6 {
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 1;
grid-column-end: 2;
background-color: pink;
}
.label-7 {
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 3;
background-color: purple;
}
It ends up like this:
You are overcomplicating this where you only need few line of code like below:
.grid {
display: grid;
grid-template-rows: 60px min-content auto;
grid-template-columns: 60px min-content auto;
width: 230px;
height: 230px;
background-color: lightgray;
}
.label-1 {
background-color: red;
}
.label-2 {
grid-column:span 2; /* this */
background-color: green;
}
.label-3 {
grid-row:span 2; /* and this */
background-color: blue;
}
.label-4 {
background-color: yellow;
}
.label-5 {
background-color: orange;
}
.label-6 {
background-color: pink;
}
.label-7 {
background-color: purple;
}
<div class="grid">
<div class="label-1">label 1</div>
<div class="label-2">label 2</div>
<div class="label-3">label 3</div>
<div class="label-4">label 4</div>
<div class="label-5">label 5</div>
<div class="label-6">label 6</div>
<div class="label-7">label 7</div>
</div>
The main issue with your code is that you are counting from 0 where you need to start from 1. 3 columns means 4 lines (1,2,3,4).
You can clearly see in the console that grid-start-* = 0 is invalid and grid-end-* = 1 will place the end of the element at the first line creating an implicit new column/row at the beginning thus you will end having 4 columns/rows:
Here is your code fixed with the correct numbers:
.grid {
display: grid;
grid-template-rows: 60px min-content auto;
grid-template-columns: 60px min-content auto;
width: 230px;
height: 230px;
background-color: lightgray;
}
.label-1 {
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 1;
grid-column-end: 2;
background-color: red;
}
.label-2 {
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 2;
grid-column-end: 4;
background-color: green;
}
.label-3 {
grid-row-start: 2;
grid-row-end: 4;
grid-column-start: 1;
grid-column-end: 2;
background-color: blue;
}
.label-4 {
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 3;
background-color: yellow;
}
.label-5 {
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 3;
grid-column-end: 4;
background-color: orange;
}
.label-6 {
grid-row-start: 3;
grid-row-end: 4;
grid-column-start: 2;
grid-column-end: 3;
background-color: pink;
}
.label-7 {
grid-row-start: 3;
grid-row-end: 4;
grid-column-start: 3;
grid-column-end: 4;
background-color: purple;
}
<div class="grid">
<div class="label-1">label 1</div>
<div class="label-2">label 2</div>
<div class="label-3">label 3</div>
<div class="label-4">label 4</div>
<div class="label-5">label 5</div>
<div class="label-6">label 6</div>
<div class="label-7">label 7</div>
</div>
I'm trying to create a fairly simple 12 column CSS Grid framework and allow the nesting of grids.
.grid {
grid-template-columns: repeat($grid-column-count, minmax(0, 1fr));
column-gap: 2rem;
}
I'm currently having an issue where the fractional columns are being pushed out of the nested grid container when increasing the gutter width, no matter what content is in it.
I've tried setting the minmax value to 0 when declaring the columns but it still insists on expanding. I know this is because the width of the gutters adds up to more than the content, but is there a way to force it down without using the overflow property?
Columns are being pushed by the gutter and/or content:
...when columns should accommodate gutter instead:
Codepen
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.container {
display: grid;
grid-template-columns: [left-gutter-start] auto [left-gutter-end] minmax(0, 960px) [main-content-end] auto [right-gutter-end];
overflow-wrap: break-word;
}
.container>.grid {
grid-column-start: left-gutter-end;
grid-column-end: main-content-end;
}
.container>.grid.grid-breakout {
grid-column-start: left-gutter-start;
grid-column-end: right-gutter-end;
}
.grid {
width: 100%;
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
-webkit-column-gap: 2rem;
column-gap: 2rem;
grid-column-end: span 12;
}
.grid .grid {
-webkit-column-gap: 2rem;
column-gap: 2rem;
}
.grid .col-1 {
grid-column-end: span 1;
}
.grid .col-2 {
grid-column-end: span 2;
}
.grid .col-3 {
grid-column-end: span 3;
}
.grid .col-4 {
grid-column-end: span 4;
}
.grid .col-5 {
grid-column-end: span 5;
}
.grid .col-6 {
grid-column-end: span 6;
}
.grid .col-7 {
grid-column-end: span 7;
}
.grid .col-8 {
grid-column-end: span 8;
}
.grid .col-9 {
grid-column-end: span 9;
}
.grid .col-10 {
grid-column-end: span 10;
}
.grid .col-11 {
grid-column-end: span 11;
}
.grid .col-12 {
grid-column-end: span 12;
}
.grid .col-end {
grid-column-end: -1;
}
.grid .colstart-start {
grid-column-start: 1;
}
.grid .colstart-2 {
grid-column-start: 3;
}
.grid .colstart-3 {
grid-column-start: 4;
}
.grid .colstart-4 {
grid-column-start: 5;
}
.grid .colstart-5 {
grid-column-start: 6;
}
.grid .colstart-6 {
grid-column-start: 7;
}
.grid .colstart-7 {
grid-column-start: 8;
}
.grid .colstart-8 {
grid-column-start: 9;
}
.grid .colstart-9 {
grid-column-start: 10;
}
.grid .colstart-10 {
grid-column-start: 11;
}
div[class*="col-"] {
text-align: left;
background-color: orange;
font-size: 12px;
font-family: sans-serif;
}
div[class*="col-"]:before {
content: attr(class);
display: inline-block;
margin: 4px;
}
.container[class*="col-"]:before {
display: none;
}
div[class*="col-"] div[class*="col-"] {
background: lightgreen;
}
div[class*="col-"] div[class*="col-"]:after {
content: " (nested)";
display: inline-block;
margin: 4px;
}
.grid {
row-gap: 1rem;
}
.grid .grid {
background: green;
}
.grid-breakout {
background: red;
}
.container {
-webkit-column-gap: 1rem;
column-gap: 1rem;
row-gap: 1rem;
margin-bottom: 1rem;
}
<div class="container">
<div class="grid">
<div class="col-4"></div>
<div class="col-4">
<div class="grid">
<div class="col-12"></div>
<div class="col-3"></div>
<div class="col-9"></div>
<div class="col-2"></div>
<div class="col-10"></div>
<div class="col-1"></div>
<div class="col-11"></div>
</div>
</div>
<div class="col-4"></div>
<div class="col-4"></div>
</div>
<div class="grid">
<div class="col-6">
<p>This is what I would want to happen...</p>
<div class="grid">
<div class="col-12"></div>
<div class="col-3"></div>
<div class="col-9"></div>
<div class="col-2"></div>
<div class="col-10"></div>
<div class="col-1"></div>
<div class="col-11"></div>
</div>
</div>
<div class="col-6">
<div class="grid">
<div class="col-4"></div>
<div class="col-8"></div>
</div>
</div>
</div>
</div>
Short answer.
Bear in mind, that for any given grid, you should never have gaps that multiplied by the columns will have bigger size than the container grid even when the columns has no content.
In other words: gap * columns(0width) < gridWidth otherwise, it will overflow.
Try to reduce the gap for inner grids from 2rem to 1rem for instance and your example will work
.main {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(12, 1fr);
margin: 0 auto;
width: 100%;
max-width: 1280px;
}
.one, .two, .three, .four, .five, .six,
.seven, .eight, .nine, .ten, .eleven, .twelve {
grid-column-end: span 12;
}
.nested {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(12, 1fr);
}
.merge-two-rows { grid-row-end: span 2 }
.merge-three-rows { grid-row-end: span 3 }
.merge-four-rows { grid-row-end: span 4 }
.merge-five-rows { grid-row-end: span 5 }
.merge-six-rows { grid-row-end: span 6 }
#media only screen and (min-width: 481px) {
.one { grid-column-end: span 1 }
.two { grid-column-end: span 2 }
.three { grid-column-end: span 3 }
.four { grid-column-end: span 4 }
.five { grid-column-end: span 5 }
.six { grid-column-end: span 6 }
.seven { grid-column-end: span 7 }
.eight { grid-column-end: span 8 }
.nine { grid-column-end: span 9 }
.ten { grid-column-end: span 10 }
.eleven { grid-column-end: span 11 }
}
Resource: Smart 12 Column Grid with Nesting
I have this simple grid:
body { margin: 0; }
.grid {
-ms-grid-columns: 200px auto;
-ms-grid-rows: 54px 53px auto;
display: grid;
height: 100vh;
grid-template-areas:
"header header"
"navbar navbar"
"sidebar content";
grid-template-columns: 200px auto;
grid-template-rows: 54px 53px auto;
}
.header {
grid-area: header;
-ms-grid-column: 1;
-ms-grid-row: 1;
-ms-grid-column-span: 2;
background-color: orange;
}
.navbar {
grid-area: navbar;
-ms-grid-column: 1;
-ms-grid-row: 2;
-ms-grid-column-span: 2;
background-color: lightgreen;
}
.sidebar {
grid-area: sidebar;
-ms-grid-column: 1;
-ms-grid-row: 3;
background-color: #eee;
}
.content {
grid-area: content;
-ms-grid-column: 2;
-ms-grid-row: 3;
background-color: yellow;
}
<div class="grid">
<div class="header">header</div>
<div class="navbar">navbar</div>
<div class="sidebar">sidebar</div>
<div class="content">content</div>
</div>
I have tried to add the old Microsoft-specific CSS -ms-grid-prefixed grid properties accordingly so it is supposed to work in IE 11 as well. What I get instead is this:
Here's the IE11-debug codepen: https://s.codepen.io/connexo/debug/BaBLpbx/yYryLJBqwdPM
Here's the full codepen for other browsers: https://codepen.io/connexo/pen/BaBLpbx
Does anyone see what I'm missing to make this simple grid work in IE 11?
Okay, I was able to solve the problem.
display: -ms-grid; was missing on the grid-container. Props go to #Michael_B for spotting this crucial mistake.
By the looks of it auto for column/row-definitions seems to be unsupported/interpreted differently on IE 11. I simply replaced it with 1fr.
body { margin: 0; }
.grid {
-ms-grid-columns: 200px 1fr;
-ms-grid-rows: 54px 53px 1fr;
display: grid;
display: -ms-grid;
height: 100vh;
grid-template-areas:
"header header"
"navbar navbar"
"sidebar content";
grid-template-columns: 200px auto;
grid-template-rows: 54px 53px auto;
}
.header {
grid-area: header;
-ms-grid-column: 1;
-ms-grid-row: 1;
-ms-grid-column-span: 2;
background-color: orange;
}
.navbar {
grid-area: navbar;
-ms-grid-column: 1;
-ms-grid-row: 2;
-ms-grid-column-span: 2;
background-color: lightgreen;
}
.sidebar {
grid-area: sidebar;
-ms-grid-column: 1;
-ms-grid-row: 3;
background-color: #eee;
}
.content {
grid-area: content;
-ms-grid-column: 2;
-ms-grid-row: 3;
background-color: yellow;
}
<div class="grid">
<div class="header">header</div>
<div class="navbar">navbar</div>
<div class="sidebar">sidebar</div>
<div class="content">content</div>
</div>
Your IE is probably using a lower version to render your page you can check it in IE Dev Tools.
To solve it try adding this meta tag in your HTML page
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
The orange box won't span more than one column no matter what I set the "grid-column" to be.
Why is that?
I have tried the following: combinations: (It's the .hr-3 item)
grid-column: 6 / span 9;
grid-column: 6 / 9;
grid-column: 2 / 7;
grid-column: 2 / span 9;
I triple checked that I am targeting the right item.
Nothing seems to work..
#import url('https://fonts.googleapis.com/css?family=Montserrat|Teko');
html, body {
background: transparent;
width: 100%;
height: 100%;
}
#a {
margin: 50px 0 0 50px;
width: 70%;
height: 70%;
background: rgb(250,250,250);
display: grid;
grid-template-columns: auto auto 1px auto repeat(6, 2fr);
grid-template-rows: auto repeat(9,1fr);
//transform: rotate(-45deg);
grid-gap: 5px;
}
.item {
//background: rgba(100,100,0,0.02);
font-family: 'Montserrat', sans-serif;
}
.item-1 {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.item-2 {
grid-column: 2 / 3;
grid-row: 1 / span 3;
writing-mode: vertical-rl;
text-orientation: upright;
display: flex;
align-items: center;
padding-top: 3px;
}
.item-3 {
grid-column: 4 / 5;
grid-row: 1 / span 3;
writing-mode: vertical-rl;
text-orientation: upright;
display: flex;
align-items: center;
padding-top: 3px;
}
.item-4 {
grid-column: 5 / 6;
grid-row: 1 / 1;
}
.hr-1 {
grid-column: 3 / 4;
grid-row: 2 / span 3;
background: rgba(0,0,0,0.9);
}
.hr-2 {
grid-column: 6 / 7;
grid-row: 1 / span 8;
border-left: 25px solid red;
}
.hr-3 {
grid-column: 6 / span 9; // <------- DOESN'T WORK?
grid-row: 6/8;
border: 25px solid orange;
}
<div id="a">
<div class="item item-1"><b>John</b></div>
<div class="item item-2"><b>A</b>lexander</div>
<hr class="hr-1"/>
<div class="item item-3"><b>B</b>lue</div>
<div class="item item-4"><b>Peterson</b></div>
<div class="item item-5"></div>
<hr class="hr-2"/>
<hr class="hr-3"/>
<hr class="hr-4"/>
</div>
hr has a default margin set that is creating the issue. Make them equal to 0.
The default margin is set to auto so it's aligning your item (an empty one) inside the track which make you think your element isn't spaning the needed columns. What you will see in all the case is the 50px border you made (left+right)
#import url('https://fonts.googleapis.com/css?family=Montserrat|Teko');
html, body {
background: transparent;
width: 100%;
height: 100%;
}
#a {
margin: 50px 0 0 50px;
width: 70%;
height: 70%;
background: rgb(250,250,250);
display: grid;
grid-template-columns: auto auto 1px auto repeat(6, 2fr);
grid-template-rows: auto repeat(9,1fr);
//transform: rotate(-45deg);
grid-gap: 5px;
}
.item {
//background: rgba(100,100,0,0.02);
font-family: 'Montserrat', sans-serif;
}
.item-1 {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.item-2 {
grid-column: 2 / 3;
grid-row: 1 / span 3;
writing-mode: vertical-rl;
text-orientation: upright;
display: flex;
align-items: center;
padding-top: 3px;
}
.item-3 {
grid-column: 4 / 5;
grid-row: 1 / span 3;
writing-mode: vertical-rl;
text-orientation: upright;
display: flex;
align-items: center;
padding-top: 3px;
}
.item-4 {
grid-column: 5 / 6;
grid-row: 1 / 1;
}
.hr-1 {
grid-column: 3 / 4;
grid-row: 2 / span 3;
background: rgba(0,0,0,0.9);
}
.hr-2 {
grid-column: 6 / 7;
grid-row: 1 / span 8;
border-left: 25px solid red;
}
.hr-3 {
grid-column: 6 / span 9;
grid-row: 6/8;
border: 5px solid orange;
}
hr {
margin:0;
}
<div id="a">
<div class="item item-1"><b>John</b></div>
<div class="item item-2"><b>A</b>lexander</div>
<hr class="hr-1"/>
<div class="item item-3"><b>B</b>lue</div>
<div class="item item-4"><b>Peterson</b></div>
<div class="item item-5"></div>
<hr class="hr-2"/>
<hr class="hr-3"/>
<hr class="hr-4"/>
</div>
Here is what you can see using the dev tools and by keeping the default margin:
You can see that the element is taking 9 column and 2 rows and the margin is centering everything inside.