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>
Related
With a screen size > 576px and without changing the HTML, how can I collapse the divs so that the divs in the right-hand column appear below each other with only a 10px grid-row-gap.
The description, features and tick-features divs all have dynamic content.
.container {
display: grid;
grid-row-gap: 10px;
background: lightgray;
font-family: sans-serif;
padding: 0;
}
.container h1, .container div {
color: white;
padding: 10px;
margin: 0;
}
.container h1 {
background: blue;
}
.container .description {
background: darkslategray;
}
.container .features {
background: green;
}
.container .tick-features {
background: purple;
}
.container .static-map {
background: maroon;
}
.container .full-width {
background: darkolivegreen;
}
#media screen and (min-width: 576px) {
.container {
grid-template-columns: 50% 1fr;
grid-template-rows: auto;
grid-column-gap: 10px;
max-width: 700px;
}
.container h1 {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
.container .description {
grid-column: 1/2;
grid-row: 2/5;
height: 500px;
}
.container .features {
grid-column: 2 /3;
grid-row: 2 / 3;
height: 100px;
}
.container .tick-features {
grid-column: 2 /3;
grid-row: 3 / 4;
height: 100px;
}
.container .static-map {
grid-column: 2 /3;
grid-row: 4 / 5;
}
.container .full-width {
grid-column: 1 / 3;
grid-row: 5 / 6;
}
}
<div class="container">
<h1>HEADER</h1>
<div class="features">Features</div>
<div class="description">Description</div>
<div class="tick-features">Tick features</div>
<div class="static-map">Static Map</div>
<div class="full-width">Full width div</div>
</div>
Adding images to show what I'm trying to achieve.
+++
The Problem
It's important to note that the cells in the right-hand column are already next to each other, separated only by the 10px row gap.
As you can see with the dashed outlines, there is no wide vertical gap between the cells on the right. The are right next to each other.
The problem is that each item within the cell has a lower height than the row it's in.
.container .features {
grid-column: 2 /3;
grid-row: 2 / 3;
height: 100px;
}
.container .tick-features {
grid-column: 2 /3;
grid-row: 3 / 4;
height: 100px;
}
With each item set to height: 100px, it doesn't cover the full height of the cell, leaving a lot of empty space.
Solutions
Depending on what exactly you need, you can approach the problem in various ways. Here are two:
1. Use min-height instead of height
Replace height: 100px with min-height: 100px, allowing the items to consume all free space. (Consider a similar switch for the .description item.)
.container {
display: grid;
grid-row-gap: 10px;
background: lightgray;
font-family: sans-serif;
padding: 0;
}
.container h1,
.container div {
color: white;
padding: 10px;
margin: 0;
}
.container h1 {
background: blue;
}
.container .description {
background: darkslategray;
}
.container .features {
background: green;
}
.container .tick-features {
background: purple;
}
.container .static-map {
background: maroon;
}
.container .full-width {
background: darkolivegreen;
}
#media screen and (min-width: 576px) {
.container {
grid-template-columns: 50% 1fr;
grid-template-rows: auto;
grid-column-gap: 10px;
max-width: 700px;
}
.container h1 {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
.container .description {
grid-column: 1/2;
grid-row: 2/5;
/* height: 500px; */
min-height: 500px; /* new */
}
.container .features {
grid-column: 2 /3;
grid-row: 2 / 3;
/* height: 100px; */
min-height: 100px; /* new */
}
.container .tick-features {
grid-column: 2 /3;
grid-row: 3 / 4;
/* height: 100px; */
min-height: 100px; /* new */
}
.container .static-map {
grid-column: 2 /3;
grid-row: 4 / 5;
}
.container .full-width {
grid-column: 1 / 3;
grid-row: 5 / 6;
}
}
<div class="container">
<h1>HEADER</h1>
<div class="features">Features</div>
<div class="description">Description</div>
<div class="tick-features">Tick features</div>
<div class="static-map">Static Map</div>
<div class="full-width">Full width div</div>
</div>
2. Use grid-template-rows
You may also be able to handle the problem at the container level, using grid-template-rows.
.container {
display: grid;
grid-row-gap: 10px;
background: lightgray;
font-family: sans-serif;
padding: 0;
}
.container h1,
.container div {
color: white;
padding: 10px;
margin: 0;
}
.container h1 {
background: blue;
}
.container .description {
background: darkslategray;
}
.container .features {
background: green;
}
.container .tick-features {
background: purple;
}
.container .static-map {
background: maroon;
}
.container .full-width {
background: darkolivegreen;
}
#media screen and (min-width: 576px) {
.container {
grid-template-columns: 50% 1fr;
grid-template-rows: 50px minmax(100px, 1fr) minmax(100px, 1fr) 100px 50px;
grid-column-gap: 10px;
max-width: 700px;
}
.container h1 {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
.container .description {
grid-column: 1/2;
grid-row: 2/5;
/* height: 500px; */
}
.container .features {
grid-column: 2 /3;
grid-row: 2 / 3;
/* height: 100px */
}
.container .tick-features {
grid-column: 2 /3;
grid-row: 3 / 4;
/* height: 100px; */
}
.container .static-map {
grid-column: 2 /3;
grid-row: 4 / 5;
}
.container .full-width {
grid-column: 1 / 3;
grid-row: 5 / 6;
}
}
<div class="container">
<h1>HEADER</h1>
<div class="features">Features</div>
<div class="description">Description</div>
<div class="tick-features">Tick features</div>
<div class="static-map">Static Map</div>
<div class="full-width">Full width div</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">
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.
I'm experimenting with css grid and i'm trying to make a simple example, but it does not seem to work on IE11 although i use the appropriate syntax:
.grid {
background: gold;
height: 90vh;
display: -ms-grid;
display: grid;
grid-gap: 20px;
-ms-grid-columns: 405px 1fr;
grid-template-columns: 405px 1fr;
grid-template-rows: 1fr;
-ms-grid-rows: 1fr;
}
section {
background: red;
}
<div class="grid">
<section>
section1
</section>
<section>
section2
</section>
</div>
Apparently you need to explicitly set the location of each element of the grid, so for the example in the question, you'll need to do this:
<div class="grid">
<section class="s1">
section1
</section>
<section class="s2">
section2
</section>
</div>
.s1 {
padding: 20px;
background: red;
-ms-grid-row: 1;
-ms-grid-column: 1;
}
.s2 {
padding: 20px;
background: green;
-ms-grid-row: 1;
-ms-grid-column: 2;
}
Doing it manually can be very tedious, but if you use grid-template-areas, autoprefixer will automatically render it for you.
So the final example looks like this:
.grid {
grid-template-areas: "s1 s2";
background: gold;
height: 500px;
display: -ms-grid;
display: grid;
grid-gap: 20px;
-ms-grid-columns: 405px 1fr;
grid-template-columns: 405px 1fr;
grid-template-rows: 1fr;
-ms-grid-rows: 1fr;
}
.grid .grid{
height: 300px;
}
.s1 {
padding: 20px;
background: red;
-ms-grid-row: 1;
-ms-grid-column: 1;
grid-area: s1;
}
.s1 .s1 {
background: teal;
}
.s2 {
padding: 20px;
background: green;
-ms-grid-row: 1;
-ms-grid-column: 2;
grid-area: s2;
}
.s2 .s2 {
background: yellow;
}
section section {
background: green;
}
<div class="grid">
<section class="s1">
section1
</section>
<section class="s2">
<div class="grid">
<section class="s1">
nested-section1
</section>
<section class="s2">
nested-section2
</section>
</div>
</section>
</div>