I have a grid below with css.
In second row, The Document Date is Too close to Document Number. I tried changing 1fr to 3fr, didn't work.
.titles-grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
<div class="titles-grid">
<div class="first-column">Document Number</div>
<div class="second-column">Created</div>
<div class="first-column">{{documentApnIncorporatorData.documentNumber}}</div>
<div class="second-column">{{documentApnIncorporatorData.documentDate}}</div>
</div>
I was going to add the following with margin-left. Just curious if there isa more professional with css grid, to separate the column spacing.
.second-column {
margin-left:5px;
}
You can use:
grid-gap
grid-row-gap
grid-column-gap
to add spacing to the grid
For example
.titles-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 3em;
}
<div class="titles-grid">
<div class="first-column">Document Number</div>
<div class="second-column">Created</div>
<div class="first-column">{{documentApnIncorporatorData.documentNumber}}</div>
<div class="second-column">{{documentApnIncorporatorData.documentDate}}</div>
</div>
Note that grid-row-gap and grid-column-gap are being phased out for row-gap and column-gap respectively.
Just add column-gap: 2rem; in rem or px as you want.
.titles-grid {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 2rem; /* added */
}
<div class="titles-grid">
<div class="first-column">Document Number</div>
<div class="second-column">Created</div>
<div class="first-column">{{documentApnIncorporatorData.documentNumber}}</div>
<div class="second-column">{{documentApnIncorporatorData.documentDate}}</div>
</div>
Related
.grid-container {
display: grid;
grid-gap: 10px;
grid-template-columns: 2fr 1fr;
grid-template-rows: 1fr 1fr;
}
.grid-item {
background: blue;
height: 100px;
}
.grid-item .item1 {
grid-row-start: 1;
grid-row-end: 3;
}
<div class="grid-container">
<div class="grid-item"> </div>
<div class="grid-item item1"> </div>
<div class="grid-item"> </div>
</div>
I have this, but it's not what I want
What I don't want
I want this, see this following picture :
What I want
Remove the height from the grid-items and set the rows to be 100px.
Then tell the "tall" item to be in column 2
.grid-container {
display: grid;
gap: 10px;
grid-template-columns: 2fr 1fr;
grid-auto-rows: 100px;
}
.grid-item {
background: blue;
}
.grid-item.item1 {
grid-column:2;
grid-row: 1 / span 2;
}
<div class="grid-container">
<div class="grid-item"> </div>
<div class="grid-item item1"> </div>
<div class="grid-item"> </div>
</div>
At first, You have a typo .grid-item .item1 , .item1 is not a child of .grid-item . You need to remove that space in between classnames : .grid-item.item1.
beside you have also to reset height for .item1 so it can grow the entire rows it spans, and if you also set in which columns it should stand, it avoids to see it elsewhere.
To help you debug your css, give different background-color to your items to see exactly where they stand.
possible CSS fix
.grid-container {
display: grid;
grid-gap: 10px;
grid-template-columns: 2fr 1fr;
grid-template-rows: 1fr 1fr;
}
.grid-item {
background: blue;
height: 100px;
}
.grid-item.item1 {
grid-row-start:1;
grid-row-end:3;
grid-column:2;
height:auto;
background:red;
}
<div class="grid-container">
<div class="grid-item"> </div>
<div class="grid-item item1"> </div>
<div class="grid-item"> </div>
</div>
CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.
So you setting height of grid-item is wrong, because it defeats the whole purpose of grid, which is to assign area to grid childrens based upon the layout divided by grid-lines.
.grid-container {
display: grid;
grid-gap: 10px;
grid-template-columns: 2fr 1fr;
grid-template-rows: 1fr 1fr;
height:200px;
}
.grid-item {
background: blue;
}
.item1 {
grid-row: 1/3;
grid-column: 2/3;
}
<div class="grid-container">
<div class="grid-item"> </div>
<div class="grid-item item1"> </div>
<div class="grid-item"> </div>
</div>
I'm trying to use CSS Grid in IE11. From what I've heard, it is posible. What I am trying to do is something like this:
Example on CodePen
My HTML is simple:
<div class="grid">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
</div>
The CSS is
.grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 20px 1fr 20px 1fr;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
.col {
margin: 0;
padding: 0;
height: 100px;
background: #ddd;
}
When I load the page in chrome, it's fine (see image above). Alas, here's how it looks in IE11.
Even though I've added in the relevant MS prefixes, it still seems like the boxes are stacked on top of each other.
Anyone know what I'm missing here?
I would like to use CSS Grid to create a set of unevenly sized content columns which, for smaller viewports, stack vertically instead of horizontally.
My starting point is this codepen, which has three repeated columns of equal size that stack when you change the size of the viewport (by making the browser window smaller, for example). That pen starts out looking like this:
When I halve the available screen space, it shrinks down to like this:
This automatic breaking behavior is achieved with the follow grid definition in CSS:
.wrapper-wrapper {
display: grid;
grid-template-columns: 1fr minmax(0, 1024px) 1fr;
}
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr) ) ;
grid-column: 2/-2;
}
I modified this code to use unevenly sized columns in this codepen:
.layout {
display: grid;
grid-template-columns: 1fr minmax(0px, 1024px) 1fr;
}
.content {
grid-column: 2 / -2;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 3fr) minmax(200px, 4fr) minmax(200px, 3fr));
grid-gap: 10px;
}
But when I resize the browser window, instead of stacking in the rows like the first example, this example does the following:
But I want the following to happen:
The only difference between the first example and the second is that in the second, an unevenly sized grid column layout is used. If I modify the following line:
grid-template-columns: repeat(auto-fill, minmax(200px, 3fr) minmax(200px, 4fr) minmax(200px, 3fr));
And replace it with:
grid-template-columns: repeat(auto-fill, minmax(200px, 3fr));
As in the first example, it begins to do what I want again.
What do I need to do to preserve this behavior in the uneven columns case?
The problem code:
.layout {
display: grid;
grid-template-columns: 1fr minmax(0px, 1024px) 1fr;
}
.content {
grid-column: 2 / -2;
display: grid;
grid-template-columns: repeat(auto-fill,
minmax(200px, 3fr)
minmax(200px, 4fr)
minmax(200px, 3fr));
grid-gap: 10px;
}
.content-section {
background: lightblue;
}
.item-image {
width: 100%;
}
<div class="layout">
<div class="content">
<div class="content-section sidebar left-sidebar">
<div class="left-news-item">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png" class="item-image">
</div>
</div>
<div class="content-section content-main">
<div class="center-news-item">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png" class="item-image">
</div>
</div>
<div class="content-section sidebar right-sidebar">
<div class="left-news-item">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png" class="item-image">
</div>
</div>
</div>
</div>
I've been playing around with CSS Grid recently and have noticed something that I can't see to find the answer to. Let's say I split my page out to have 2 columns, and then a row below it, with another column (which spans both columns). On mobile, I'd like them to stack one on top of the other and then go back to layout described above after a certain breakpoint. Here is the markup:
HTML
<div class="grid">
<div class="upper">
<div class="a">A</div>
<div class="b">B</div>
</div>
<div class="lower">
<div class="c">C</div>
</div>
</div>
SCSS
.upper, .lower {
display: grid;
}
.upper {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
background-color:grey;
grid-gap:10px;
#media only screen and (max-width:800px) {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
}
.lower {
grid-template-columns: 1fr;
grid-template-rows:auto;
background-color: green;
grid-gap:10px;
}
I've noticed that on mobile, even though I've defined grid-gap for both of my grid sections, on mobile when the columns stack, the grid-gap is not maintained. So in the fiddle below, when you make the window smaller, you can see that when the columns, stack one on top of the other, the gap between B and C is non existent. Here is the fiddle:
Fiddle
Hope I'm making sense!
EDIT: Bear in mind I'm only testing this in Firefox and Chrome (which support grid).
The grid-gap rule doesn't work between B and C because it doesn't apply.
This rule creates gutters between rows and columns inside a grid container.
But you are declaring grid-gap on .upper and .lower, two siblings in a block container. Their parent (.grid) is not a grid container because it doesn't have display: grid or inline-grid.
Therefore, grid-gap: 10px on .upper is creating a 10px gutter between A and B...
and grid-gap: 10px on .lower is creating a 10px gutter between.... nothing (.lower has only one grid item. grid-gap creates gutters between multiple grid items).
fiddle demo 1
For grid-gap to work among the .upper and .lower siblings you need to apply it to their parent, which must be a grid container.
fiddle demo 2
.grid {
display: grid; /* NEW */
grid-gap: 25px; /* NEW */
}
.upper, .lower {
display: grid;
}
.upper {
grid-template-columns: 1fr 1fr;
grid-gap: 25px;
}
.lower {
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-gap: 10px; /* does nothing unless there are multiple grid items */
}
#media ( max-width:800px ) {
.upper {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
}
.upper > * { border: 1px dashed red; }
.lower > * { border: 1px dashed blue; }
<div class="grid">
<div class="upper">
<div class="a">A</div>
<div class="b">B</div>
</div>
<div class="lower">
<div class="c">C</div>
</div>
</div>
I have a CSS Grid Layout in which I want to make some (middle 3) rows stretch to their maximum size. I'm probably looking for a property similar to what flex-grow: 1 does with Flexbox but I can't seem to find a solution.
Note: This is intended for an Electron app only, so browser compatibility is not really a concern.
I have the following CSS Grid Layout:
.grid {
display: grid;
grid-template-columns: 1fr 1.5fr 1fr;
grid-gap: 10px;
height: calc(100vh - 10px);
}
.grid .box {
background-color: grey;
}
.grid .box:first-child,
.grid .box:last-child {
grid-column-start: 1;
grid-column-end: -1;
}
/* These rows should 'grow' to the max height available. */
.grid .box:nth-child(n+5):nth-child(-n+7) {
grid-column-start: 1;
grid-column-end: -1;
}
<div class="grid">
<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>
Which creates the following grid:
When none of the boxes contain any content I would like the grid to look something like this:
One of the Related posts gave me the (simple) answer.
Apparently the auto value on the grid-template-rows property does exactly what I was looking for.
.grid {
display:grid;
grid-template-columns: 1fr 1.5fr 1fr;
grid-template-rows: auto auto 1fr 1fr 1fr auto auto;
grid-gap:10px;
height: calc(100vh - 10px);
}
There is also the need to specify the minimum height for the elements, otherwise if they have no content they will disappear.
:root{
--body-margin:10px;
}
body{
margin:var(--body-margin);
}
.grid {
display:grid;
grid-template-columns: 1fr 1.5fr 1fr;
grid-template-rows: auto auto 1fr 1fr 1fr auto auto;
grid-gap:10px;
height: calc(100vh - calc(2 * var(--body-margin)));
}
.grid div{
min-height:20px;
background-color: grey;
}
.grid
div:nth-child(n+5):nth-child(-n+7),
div:first-child,
div:last-child{
grid-column-start: 1;
grid-column-end: -1;
}
<div class="grid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Use of repeat with grid
When boxes doesn't contain any content and If you want to get rid of the empty box spaces as well than you can use following.
grid-template-rows: repeat(2, auto) repeat(3, 1fr) repeat(2, auto);
Or more compact syntax as last two cell size will be by default auto if not defined:
grid-template-rows: repeat(2, auto) repeat(3, 1fr);
If you want some space in any case than you can use:
grid-template-rows: repeat(2, 10px) repeat(3, 1fr) repeat(2, 10px);
Finally CSS would be
.grid {
display: grid;
grid-template-columns: 1fr 1.5fr 1fr;
grid-template-rows: repeat(2, auto) repeat(3, 1fr);
grid-gap: 10px;
height: calc(100vh - 10px);
}
.periodic-table {
display: grid;
grid-template-columns: repeat(18, 60px);
grid-template-rows: repeat(7, 70px) 40px repeat(2, 70px);
grid-gap: 2px;
}
This code will create 18 columns each of them are 60px, and 7 rows of 70px 8th row will be 40px then again 9th and 10th row will be 70px.