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.
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>
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
Sorry for the weird title, but I am not aware of a name or simple way to put what I am trying to achieve.
I want to make something like this, but I want it to be responsive so that if some words are longer, the other words get bigger, and the aspect ratio (and shape) of the div remains the same.
I made the example image in Adobe XD, but I would like to recreate it in css.
CSS Grid is probably best for this. How responsive it will be will depend on how well you write your media queries.
* {
font-family: sans-serif;
font-size: 1em;
}
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 2fr;
grid-template-rows: 1fr 1fr 1fr;
grid-row-gap: 0;
grid-column-gap: 0;
width: 160px;
height: 69px;
padding: 5px;
background-color: #3D3D3D;
justify-items: center;
align-items: start;
box-sizing: border-box;
}
.one {
color: #40C894;
font-weight: 600;
}
.two {
grid-row: 2;
grid-column: 1;
color: #fff;
font-weight: 600;
}
.three {
grid-row: 3;
color: #8A8A8A;
font-weight: 600;
}
.four {
grid-row: 3;
grid-column: 2;
color: #8A8A8A;
font-weight: 600;
}
.five {
grid-row: 3;
grid-column: 3;
color: #fff;
font-weight: 600;
}
.six {
grid-row: 1 / 3;
grid-column: 2 / 4;
color: #8A8A8A;
font-weight: 600;
font-size: 2.4em;
align-self: end;
}
<div class="grid-container">
<div class="one">38 K</div>
<div class="two">19 D</div>
<div class="three">6037</div>
<div class="four">DMG</div>
<div class="five">6 MVPs</div>
<div class="six">2K/D</div>
</div>
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.