Playing around with display: grid and got some unwanted space. Am I missing some specs in my css?
What I'm after is vertically align the 5 links at the bottom of the purple'ish plane.
Following are the codes I used:
.grid {
display: grid;
}
.-twoColumns {
grid-template-columns: repeat(2, 50%);
}
.-grid-gap {
grid-gap: 1rem;
}
<div class="grid -twoColumns -grid-gap">
<div class="column">
column
</div>
<div class="column">
column
</div>
</div>
Related
I have a app which has rows and columns. I can dynamically remove rows. When I remove them then the other items distribute themself equaly over the width of the grid.
Now I want to have something like flex, but with grid. The grid items should have a margin to the next item beside them. Like that. And not distribute themself over the width.
CSS
.column {
padding: 10px;
margin: 10px 0;
display: grid;
grid-auto-flow: column;
.row-item {
text-align: center;
display: grid;
grid-auto-rows: 25px;
grid-row-gap: 10px;
width: 9vw;
}
}
HTML
<div class="column">
<ng-container *ngFor="let jS of journeyStepDisplay">
<div *ngIf="jS.display" class="row-item">
<div class="column-item header">
<p>{{ jS.name }}</p>
</div>
</div>
</ng-container>
</div>
If you have a minimum and/or a max width of the grid items that are to be distributed, you can use a combination of different grid properties to get the desired outcome, like
grid-template-columns: repeat(auto-fit, minmax(100px, 100px));
In the example below, we have a grid where the items will be distributed evenly with a min/max width of 100px. If they can't fit into the row a new row will be inserted.
.container {
height: 200px;
width: 600px;
gap: 5px;
border: 2px solid red;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 100px));
grid-template-rows: auto;
padding: 10px;
}
.box {
border: 2px solid blue;
}
<div class="container">
<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>
You have to declare width for each item.
<div class="column">
<div class="row-item">
<div class="column-item header">
<p>ciao</p>
</div>
</div>
<div class="row-item">
<div class="column-item header">
<p>ciao2</p>
</div>
</div>
<div class="row-item">
<div class="column-item header">
<p>ciao3</p>
</div>
</div>
</div>
.column {
width: 100%;
display: grid;
grid-template-columns: 150px 150px 150px 150px;
grid-template-rows: auto;
}
.row-item {
text-align: center;
}
here a useful guide.
(I didn't use directive from angular, but you can add it)
I would like to have a CSS grid that renders the items column by column, where the max number of columns and rows is not assumed. I have below the best version that I was able to come up with, although with some workarounds that I am hoping to not be required:
.grid {
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(4, 1fr);
}
.item {
margin: 1em;
}
.column {
display: contents;
}
.clear {
grid-row-end: -1;
}
<div class="grid">
<div class="column">
<div class="item">A1</div>
<div class="item">A2</div>
<div class="clear"></div>
</div>
<div class="column">
<div class="item">B1</div>
<div class="item">B2</div>
<div class="item">B3</div>
<div class="clear"></div>
</div>
<div class="column">
<div class="item">C1</div>
<div class="clear"></div>
</div>
</div>
As you can see:
The CSS hard codes the number of rows using grid-template-rows. Removing this will cause items to appear in incorrect columns if there are more items than the hard-coded number of rows, while making the hard-coded number extremely large (e.g., 1000) will work for all practical number of items in a column, but cause a large amount of blank space to be added to the bottom of the document.
There is a "clear" div that I'd rather not need in each column to force the auto-placement to the next column.
Note that just having each column lay itself out (using something like flexbox or CSS Columns) will not work, as it is important that the grid items (which may have varying heights) remain aligned with their horizontal neighbors.
You can easily get rid of the clear element by setting the row of the first element of each column then you can consider the trick of a big number of rows but with auto sizing and not 1fr. You won't have any blank space if you don't use row gaps:
.grid {
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(1000, auto);
}
.item {
margin: 1em;
}
.column {
display: contents;
}
.column .item:first-child {
grid-row: 1;
}
<div class="grid">
<div class="column">
<div class="item">A1</div>
<div class="item">A2</div>
</div>
<div class="column">
<div class="item">B1</div>
<div class="item">B2</div>
<div class="item">B3</div>
</div>
<div class="column">
<div class="item">C1</div>
</div>
</div>
started using CSS grid instead of boostrap, and im having some issue to get it right.
i want to create a grid layout that have 4fr, and 8fr columns (just like boostrap 8 and 4 columns)
and when the divs inside the grid of 4r gets fill its the divs go to a second row just like flex-wrap:wrap.
BUT Its not work its only push it inline one after another, and ignoring the grid boundaries
.home {
display: grid;
grid-template-columns: 4fr 8fr;
grid-template-rows: 100%;
height: 100%;
}
<div class="home">
<div class="col-8">
</div>
<div class="col-4">
<mat-button-toggle-group class="side-menu-button">
<mat-button-toggle>test </mat-button-toggle>
<mat-button-toggle>test</mat-button-toggle>
<mat-button-toggle>test</mat-button-toggle>
<mat-button-toggle>test</mat-button-toggle>
<mat-button-toggle>test</mat-button-toggle>
<mat-button-toggle>test</mat-button-toggle>
<mat-button-toggle>test</mat-button-toggle>
<mat-button-toggle>test</mat-button-toggle>
</mat-button-toggle-group>
</div>
</div>
i even tried changing it to
grid-template-columns: repeat(1, auto-fill, 4fr 8fr);
If you're just wanting to use the grid to have items wrap inside of a div, what you're doing should basically work. Don't forget to tell .col-8 and .col-4 where they belong inside of the grid you've set up, and set the children you want to wrap to inline-block:
* {
box-sizing: border-box;
}
.home {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 100%;
height: 100%;
width: 100%;
grid-gap: 20px;
}
.col-8 {
grid-area: 1/1/1/9;
}
.col-4 {
grid-area: 1/9/1/13;
}
.bluebox,
.blackbox {
display: inline-block;
width: 50px;
height: 20px;
}
.bluebox {
background-color: blue;
}
.blackbox {
background-color: black;
}
<div class="home">
<div class="col-8">
<div class="bluebox"></div>
<div class="bluebox"></div>
<div class="bluebox"></div>
<div class="bluebox"></div>
<div class="bluebox"></div>
<div class="bluebox"></div>
<div class="bluebox"></div>
<div class="bluebox"></div>
<div class="bluebox"></div>
<div class="bluebox"></div>
</div>
<div class="col-4">
<div class="blackbox"></div>
<div class="blackbox"></div>
<div class="blackbox"></div>
<div class="blackbox"></div>
<div class="blackbox"></div>
<div class="blackbox"></div>
<div class="blackbox"></div>
<div class="blackbox"></div>
<div class="blackbox"></div>
<div class="blackbox"></div>
</div>
</div>
The reason I set up 12 columns instead of one that's 8fr and one that's 4fr is because I'm unclear about whether you're wanting a 12 column usable system like bootstrap (which is the way I implemented it), or literally only two columns. Either way should function for what you are describing in your question, but 12 separate columns is arguably more extensible later-on.
Here's a pen that contains the above code:
https://codepen.io/grantnoe/pen/MdOQOv
grid-area is what I used to set the location of .home's children. The format is as follows:
grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
The only caveat is that you've nested the children you're wanting to wrap inside of secondary element <mat-button-toggle-group>. Consider adjusting the width of that element to 100% to fill the grid's child .col-4.
This question already has answers here:
CSS-only masonry layout
(4 answers)
Flex box masonry in one flex-container
(1 answer)
Closed 3 years ago.
What would be the best way to make the following with flexbox? I would like 2 rows that are equal width columns, however, the last column to be 100% height and fill the rest of the section.
Would it be best to use multiple rows for this?
.row {
display: flex;
flex-wrap: wrap-reverse;
}
.col {display:1;width:30%;background:red;}
.col:nth-of-type(3) {background:blue;}
<div class="row">
<div class="col">
test
</div>
<div class="col">
test
</div>
<div class="col">
test
</div>
<div class="col">
test
</div>
<div class="col">
test
</div>
</div>
Here is a solution using CSS grid layout:
Define the row as grid container using display: grid.
Define the 3-column layout by using grid-template-columns: repeat(3, 1fr)
Define the 2-column layout by using grid-template-rows: repeat(2, 1fr)
Span the third column to all the rows by using grid-row: span 2.
Adjust the gaps between the rows & columns using grid-gap property.
See demo below:
.row {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
grid-template-rows: repeat(2, 1fr); /* 2 equal rows */
grid-gap: 10px; /* gap between the rows & columns */
}
.col {
background: red;
}
.col:nth-of-type(3) {
background: blue;
grid-row: span 2; /* span all the rows */
}
<div class="row">
<div class="col">test</div>
<div class="col">test</div>
<div class="col">test</div>
<div class="col">test</div>
<div class="col">test</div>
</div>
I have created a site design and everything is okay except that I am having problem in getting the grid items to occupy all the space available to them.
I have added the site in codepen here.
.container{
border-radius: 8px;
width:90%;
height: 90vh;
margin: 0 auto;
background: #ecf0f1;
display: flex;
flex-direction: column;
}
main{
display: grid;
grid-template-columns: 300px 1fr;
flex-grow: 1;
}
.data-box{
padding-top:1rem;
background: #e74c3c;
color: #fff;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 3rem 2.5rem 2.5rem auto;
justify-items: center;
align-items: center;
}
.display-box{
padding: 2em;
background: #2c3e50;
display: grid;
grid-template-columns: repeat(auto-fit,minmax(6em,1fr));
grid-gap:1.5rem;
align-items: center;
justify-items: center;
}
HTML:
<div class="container">
<div class="main-text">
<h1>Smart Parking System UI</h1>
<p>Currently viewing: <span class="lot-id">Beta</span></p>
</div>
<main>
<div class="data-box">
<p class="m-para">Parking Status</p>
<p class="total-para">Total Seats:</p><span class="total-data">15</span>
<p class="avail-para">Available: </p><span class="avail-data">12</span>
<div class="location">
<p>Your Location:</p><i class="fas fa-map-marker-alt"></i><p>Asgard</p>
</div>
</div>
<div class="display-box">
<div class="lot-box inactive">1</div>
<div class="lot-box">2</div>
<div class="lot-box">3</div>
<div class="lot-box">4</div>
<div class="lot-box">5</div>
<div class="lot-box">6</div>
<div class="lot-box">7</div>
<div class="lot-box">8</div>
<div class="lot-box">9</div>
<div class="lot-box inactive">10</div>
<div class="lot-box inactive">11</div>
<div class="lot-box">12</div>
<div class="lot-box">13</div>
<div class="lot-box">14</div>
<div class="lot-box">15</div>
</div>
</main>
</div>
The problem can be noticed in full page view. The container div is a flexbox and contains the main-text div with flex-grow 0 and main tag with flex-grow 1. The main tag is a grid container with two grid items display-box and data-box. I am having difficulty in making them occupy all the space available to them in main tag as seen by the white blankspace.
The main element actually is stretching the full height of the container. In other words, flex-grow: 1 is working. (You may know this already.) The child elements (data-box and display-box) are not stretching the full height of the parent because they simply don't have enough content in them yet.
You also have data-box set to:
grid-template-rows: 3rem 2.5rem 2.5rem auto;
That creates four rows of a defined or content-based height. Using fr units covers available space.
grid-template-rows: 3fr 2fr 1fr auto;
revised codepen