Is there a way to have a CSS grid (display: grid) that has a 1px border around all items and also fills incomplete rows? The approach of setting the background-color seems to not be a viable solution.
My goals would be to have a grid without the grey area in the code snippet where items are missing and the grid lines always extending all the way through the table. This should work for responsive combinations of items per row.
It almost seems like special pseudo classes would be needed for doesn't have item below and doesn't have item to the right to make this work in responsive layouts because last-of-type has too little information about the grid to use it for styling.
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
background-color: #d4d4d4;
grid-gap: 1px;
border: 1px solid #d4d4d4;
}
.grid > div {
padding: 15px;
text-align: center;
background-color: white;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
You should apply
the same background-color for grid container and grid items
right and bottom borders for grid items with negative
margins (this will be compensated by grid gaps).
Demo:
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
background-color: white;
grid-gap: 1px;
border: 1px solid #d4d4d4;
}
.grid > div {
padding: 15px;
text-align: center;
background-color: inherit;
border-right: inherit;
margin-right: -1px;
border-bottom: inherit;
margin-bottom: -1px;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Related
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, 10%);
border: 1px solid red;
background-color: white;
}
.grid-container > div:nth-child(1) {
background-color: #B10DC9;
}
.grid-container > div:nth-child(2) {
background-color: antiquewhite;
}
.grid-container > div:nth-child(3) {
background-color: aquamarine;
}
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
GC = grid-container.
GI = grid-item.
So far I can add in any number of GIs into the GC and have each GI take up only 10% of the GC's width. Is there a way to make it so that for any number of GIs I add, each GI takes up an equal portion of the GC - achieving this through CSS (not javascript)? fr units did not do the trick.
You set 10%, which means that your divs will not creep out to the entire free width.
But you can do it like this using minmax():
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
This means that when your divs reach 100px wide, these divs will blend under each other.
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
border: 1px solid red;
background-color: white;
}
.grid-container > div:nth-child(1) {
background-color: #B10DC9;
}
.grid-container > div:nth-child(2) {
background-color: antiquewhite;
}
.grid-container > div:nth-child(3) {
background-color: aquamarine;
}
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
fr units did not do the trick.
Use it correctly and it will do it:
.grid-container {
display: grid;
grid-auto-columns: 1fr; /* all columns eqaul to each other */
grid-auto-flow: column; /* use a column flow */
border: 1px solid red;
}
.grid-container>div:nth-child(1) {
background-color: #B10DC9;
}
.grid-container>div:nth-child(2) {
background-color: antiquewhite;
}
.grid-container>div:nth-child(3) {
background-color: aquamarine;
}
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="grid-container">
<div>1</div>
<div>2</div>
</div>
<div class="grid-container">
<div>1</div>
</div>
How to create a dynamic grid system using css3.
I'd like to achieve an overview page with multiple cards with different heights and order of displaying cards should be the same.
Cards with different heights will be displayed on the dashboard based on the config settings so it should be auto-adjusted.
Please help me to write generic css for it.
HTML:
<div class="wrapper">
<div style="height:50px" id="foo-1">One</div>
<div style="height:50px" id="foo-2">Two</div>
<div style="height:50px" id="foo-3">Three</div>
<div style="height:100px" id="foo-4">Four</div>
<div style="height:50px" class="fifth" id="foo-5">Five</div>
</div>
CSS3:
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(550px, 1fr));
grid-auto-rows: auto;
grid-gap: 10px;
}
Please refer:
https://codepen.io/prashantbiradar92/pen/MWgXGpG?&editable=true
Problem:
The div with id foo-1,foo-3,foo-5 should be in 1 column and foo-2, foo-4 in 2nd column, with no whitespace. It should display in order.
So currently there is gutter for the div foo-5. So I have to adjust the div foo-5.
You need something like this?
https://codepen.io/hisbvdis/pen/XWrYqqO
* {
box-sizing: border-box;
}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper>div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(550px, 1fr));
grid-auto-rows: 50px;
grid-gap: 10px;
}
.col-1 {
grid-column-start: 1;
}
.big {
grid-row: span 2;
}
<div class="wrapper">
<div class="col-1" id="foo-1">One</div>
<div id="foo-2">Two</div>
<div class="col-1" id="foo-3">Three</div>
<div class="big" id="foo-4">Four</div>
<div class="col-1" id="foo-5">Five</div>
</div>
In the following layout, I want to make the green color section to be re sizable. When it's resized, cell 8 should take the whatever the space left without affecting any other cells in other rows.
.App {
display: grid;
grid-template-columns: 200px 1fr 200px;
grid-template-rows: 50px 1fr 200px 30px;
width: 100%;
height: 100%;
}
.App > div {
border: 2px solid black;
}
.nav {
background: green;
}
<div class="App">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div class="nav">7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
Size change will be done by the user. But to demonstrate, consider changing width of the .nav element to 100px. After size of .nav is changed, 8 cell should take the remaining space and grow.
.nav {
background: green;
width: 100px;
}
Is this kind of a behavior is possible using CSS Grid?
You can't change nav width and expect that it only affect the element next to it - it affect the whole first column. You can try resizing the nav in the demo below (using grid-template-columns: auto 1fr 200px) along with sufficient min-width and max-width:
.App {
display: grid;
grid-template-columns: auto 1fr 200px; /* changed */
grid-template-rows: 50px 1fr 200px 30px;
}
.App > div {
border: 2px solid black;
}
.nav {
background: green;
width: 100px; /* default width */
max-width: calc(100vw - 260px); /* do go beyond the third column */
min-width: 25px; /* min width of nav */
resize: horizontal; /* resize the div */
overflow: hidden; /* resize works if overflow not visible */
}
<div class="App"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div class="nav">7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div></div>
That's as far as you can have with the current markup. If you can change your html by wrapping the 8 and 7 into a 2-column grid item and make if a flexbox, you can have the desired effect - see demo below:
* {
box-sizing: border-box;
}
.App {
display: grid;
grid-template-columns: 1fr 1fr 200px;
grid-template-rows: 50px 1fr 200px 30px;
}
.App > div {
border: 2px solid black;
}
.nav {
grid-column: span 2;
display: flex;
}
.nav > div:first-child {
background: green;
resize: horizontal;
overflow: hidden;
width: 50%;
}
.nav > div:last-child {
flex: 1;
width: 50%;
}
<div class="App">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div class="nav">
<div>7</div>
<div>8</div>
</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
You can read more about flexboxes with a resizable slider in these posts:
Change width proportions of two blocks with a slider
How do you allow a user to manually resize a <div> element vertically?
I am trying to build a container like bootstrap container that has padding from page sides.
Since I'm new in this topic, i really don't think this is the best way to create responsive and standard container.
i just want to know is there any other ways to do something like my project.
<div class="container">
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
</div>
.container{
width: 75%;
height: auto;
background: red;
margin: 0 auto;
padding: 1px;
}
this is how i created a responsive container with grid
/* white space from sides */
.container {
display: grid;
grid-template-columns: 80px 1fr 80px;
grid-gap: 2px;
}
.container > .grid-system {
grid-column: 2;
min-width: 0;
}
/* inner grid 12 column */
.grid-system {
display: grid;
grid-template-columns: repeat(12,1fr);
grid-gap: 10px;
background: green;
}
.grid-system > div{
background: red;
grid-column: 1;
padding: 12px 16px;
text-align: center;
color: white;
}
<div class="container">
<div class="grid-system">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
I have a two column grid layout that holds boxes of heights X and 2X (fiddle, screenshot below)
Box number two has empty space underneath it, enough empty space to fit box 3:
I want to know if it is possible to have card 3 placed in that empty space (and have card 4 take card 3's place, and card 5 take card 4's place)
I attempted this layout with flex, but I reached this same situation.
.boxes {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 25px;
grid-row-gap: 25px;
}
.smallbox {
border: 2px solid black;
padding: 1em;
height: 50px;
}
.bigbox {
border: 1px solid black;
padding: 1em;
background: red;
height: 150px;
}
<div class="boxes">
<div class="bigbox">1</div>
<div class="smallbox">2</div>
<div class="smallbox">3</div>
<div class="smallbox">4</div>
<div class="smallbox">5</div>
</div>
Don't set the height on the grid items themselves.
Use grid-auto-rows at the container level, then span for the grid areas.
.boxes {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 50px; /* new */
grid-column-gap: 25px;
grid-row-gap: 25px;
}
.smallbox {
grid-row: span 1; /* new */
border: 2px solid black;
padding: 1em;
}
.bigbox {
grid-row: span 3; /* new */
border: 1px solid black;
padding: 1em;
background: red;
}
<div class="boxes">
<div class="bigbox">1</div>
<div class="smallbox">2</div>
<div class="smallbox">3</div>
<div class="smallbox">4</div>
<div class="smallbox">5</div>
</div>