I have 5 elements which were devided into two columns by grid layout like this:
Codepen
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The grid-row Property</h1>
<p>Use the <em>grid-row</em> property to specify where to place an item.</p>
<p>Item1 will start on row-line 1 and end on row-line 4:</p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
</body>
</html>
How can I resize for 2, 4 elements to fit the height of screen, such as the height of 2 and 4 will be equal to 1.5 the height of 1,3 and 5?
I would just break it down into another pair of grids using grid-template-areas to align the new containers so you have a left and right grid. If you want to keep the order the elements then separate item2 and item4 into their own container.
.grid-container {
display: grid;
grid-template-columns: auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
grid-template-areas:
'left-container right-container'
}
.grid-container > div > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.left-container {
display: grid;
grid-row-gap: 10px;
}
.right-container {
display: grid;
grid-row-gap: 10px;
}
<div class="grid-container">
<div class="left-container">
<div class="item1">1</div>
<div class="item3">3</div>
<div class="item5">5</div>
</div>
<div class="right-container">
<div class="item2">2</div>
<div class="item4">4</div>
</div>
</div>
I want to have a responsive grid of elements of variable length. The grid should fill the available width of the containing element, with the number of columns varying depending on the width of the container. This is straightforward to achieve using CSS grids; however, I don't know how to add a vertical border between columns (i.e., only in the interior column gaps). The below simple demo manages to achieve a vertical border in the event that there are three columns:
https://codepen.io/yowzadave/pen/OYPvLd?editors=1100
html, body {
box-sizing: border-box
}
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
grid-column-gap: 0.5rem;
}
.item {
border-right: 1px solid black;
padding-right: 0.5rem;
}
.item:nth-child(3n) {
border-right: none;
padding-right: 0;
}
.box {
background-color: pink;
height: 2rem;
margin: 0.5rem;
}
<html>
<body>
<div class="container">
<div class="item"><div class="box"></div></div>
<div class="item"><div class="box"></div></div>
<div class="item"><div class="box"></div></div>
<div class="item"><div class="box"></div></div>
<div class="item"><div class="box"></div></div>
<div class="item"><div class="box"></div></div>
</div>
</body>
</html>
...but in the event that the browser is wider or narrower, the borders will be misplaced. Is there a way to correctly place the borders at all browser widths?
You can use pseudo element on all the grid item where you will simply have overlap and be sure to cover all the gaps:
html,
body {
margin: 0;
}
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
grid-column-gap: 0.5rem;
overflow:hidden; /* Hide the overflow */
position:relative;
}
.item {
box-sizing: border-box;
position:relative;
}
.item:before {
content:"";
position:absolute;
top:0;
right:-0.25rem; /* Half the gap */
height:100vh; /* Big height*/
width:1px;
background:#000;
}
.box {
background-color: pink;
height: 2rem;
margin: 0.5rem;
}
<div class="container">
<div class="item">
<div class="box"></div>
</div>
<div class="item">
<div class="box"></div>
</div>
<div class="item">
<div class="box"></div>
</div>
<div class="item">
<div class="box"></div>
</div>
<div class="item">
<div class="box"></div>
</div>
<div class="item">
<div class="box"></div>
</div>
</div>
I'm trying to create a form with a variable number of form fields that would expand horizontally. Each field would have a minimum width of 300 px, but would expand to fill the row if there is extra space. If there is not enough space for each field at 300px, then it would wrap to another row. Flexbox would be the perfect solution for this. However, I also want there to be a variable width container for submit & cancel buttons that is fixed on the right side of the first row. (See the attached illustration.)
How can I create this fixed, right-aligned container that Flexbox would flow around? Can this be done with Flexbox alone? Would CSS Grid (or a combination of Flexbox & Grid) be helpful here? Example code would be appreciated.
I think your best solution is to use float and inline-block. then you can adjust sizing considering media query
body>.container {
background-color: #FFFFFF;
margin: auto;
margin-top: 24px;
padding: 0px;
}
.container {
border: solid 1px #F00;
font-size:0;
}
.box {
box-sizing: border-box;
border: 1px solid #000;
text-align: center;
vertical-align: middle;
min-height: 36px;
width: calc(25% - 10px);
min-width: 200px;
display:inline-block;
margin: 5px;
font-size:initial;
}
.box.buttons {
float:right;
}
<link data-require="bootstrap-css#*" data-semver="4.0.0-alpha.4" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" />
<div class="container">
<div class="box buttons">
<button>Submit</button>
<button>Cancel</button>
</div>
<div class="box a">Box A</div>
<div class="box b">Box B</div>
<div class="box c">Box C</div>
<div class="box e">Box E</div>
<div class="box f">Box F</div>
</div>
After some experimentation, I found that this is possible with CSS Grid. Here is the basic layout:
HTML:
<div class="auto-fit">
<div class="A">A</div>
<div class="B">B</div>
<div class="C">C</div>
<div class="D">D</div>
<div class="E">E</div>
<div class="F">F</div>
<div class="G">G</div>
<div class="H">H</div>
<div class="I">I</div>
<div class="J">J</div>
<div class="K">K</div>
<div class="L">L</div>
<div class="M">M</div>
<div class="buttons"><button>Submit</button><button>Cancel</button></div>
</div>
CSS:
div.auto-fit {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px;
}
div.auto-fit > div {
background-color: #fff;
border-radius: 3px;
padding: 15px;
font-size: 14px;
}
div.buttons {
grid-column: -1/-2;
grid-row: 1/2;
}
Here is a jsfiddle that shows it in action: https://jsfiddle.net/lobo78/5ufqdm4y/22/
In the following codepen you will see that there is a flexbox inside of a css grid. As you can see, the contents of the flexbox div are overflowing under other parts of the grid.
If I remove the CSS grid-auto-rows:100px; then the flexbox contents no longer overflow. However, I really want the other css grid items to be 100px tall, unless their contents are too tall to be contained within 100px.
How can I have all the css grid items default to 100px tall while having any items whose contents are taller than 100px grow to hold all of the contents?
* {box-sizing: border-box;}
.wrapper {
display: grid;
grid-auto-rows: 100px;
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
.box2 {
display:flex;
flex-direction: column;
}
.box2 > div{
border: 2px solid #ffa999;
border-radius: 5px;
background-color: #ffd899;
padding: 1em;
color: #d94899;
}
<div class="wrapper">
<div class="box1">Box 1</div>
<div class="box2">
Box 2
<div class="flex1">Flex One</div>
<div class="flex2">Flex One</div>
<div class="flex3">Flex One</div>
<div class="flex4">Flex One</div>
</div>
<div class="box3">Box 3</div>
</div>
Use the minmax(min, max) function.
* {box-sizing: border-box;}
.wrapper {
display: grid;
grid-auto-rows: minmax(100px, auto);
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
.box2 {
display:flex;
flex-direction: column;
}
.box2 > div{
border: 2px solid #ffa999;
border-radius: 5px;
background-color: #ffd899;
padding: 1em;
color: #d94899;
}
<div class="wrapper">
<div class="box1">Box 1</div>
<div class="box2">
Box 2
<div class="flex1">Flex One</div>
<div class="flex2">Flex One</div>
<div class="flex3">Flex One</div>
<div class="flex4">Flex One</div>
</div>
<div class="box3">Box 3</div>
</div>
Is there a way to style more than just the width of the grid gaps within the CSS grid layout module? I can't find anything about it in the documentation, however one would tend to think that it would be possible as grid gaps tend to be colored in many designs. If it is not possible, is there a workaround?
Sadly, there is currently no way in the CSS Grid spec to style grid-gap. I came up with a solution that works well though that involves just html and css: show border grid lines only between elements
Instead to use the solution above I recommend to use border with pseudo-classes because if you have an irregular amount of "table cells" you will end up with an ugly color filled cell at the end of the "table".
If you want to use borders between the "table cells" and you have not always the same amount of cells you can do something like this (this example would also work with flexbox):
.wrapper {
display: grid;
grid-template-columns: repeat(2, auto);
/* with flexbox:
display: flex;
flex-wrap: wrap;
*/
}
/* Add border bottom to all items */
.item {
padding: 10px;
border-bottom: 1px solid black;
/* with flexbox:
width: calc(50% - 21px);
*/
}
/* Remove border bottom from last item & from second last if its odd */
.item:last-child, .item:nth-last-child(2):nth-child(odd) {
border-bottom: none;
}
/* Add right border to every second item */
.item:nth-child(odd) {
border-right: 1px solid black;
}
<div class="wrapper">
<div class="item">BOX 1</div>
<div class="item">BOX 2</div>
<div class="item">BOX 3</div>
<div class="item">BOX 4</div>
<div class="item">BOX 5</div>
</div>
For instance: if one has a 5x5 grid of squares, is the only way to get colored grid lines to fill the grid with 25 elements and apply borders to those same elements?
You could do that, but grid borders do not collapse the same way that table borders can with the border-collapse property, and unlike grid gaps they'll be applied to the perimeter of your grid along with the inner borders, which may not be desired. Plus, if you have a grid-gap declaration, the gaps will separate your grid item borders much like border-collapse: separate does with table borders.
grid-gap is the idiomatic approach for spacing grid items, but it's not ideal since grid gaps are just that: empty space, not physical boxes. To that end, the only way to color these gaps is to apply a background color to the grid container.
I added the border color as a background-color to the grid and added a background color to all grid-items.
.grid {
width: 1000px;
display: grid;
background: #D7D7D7;
grid-template-columns: repeat(5, 1fr);
grid-auto-rows: 200px;
grid-gap: 1px;
}
.grid-item {
background: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="grid">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
</body>
</html>
This works for me.
It's not possible, but simply by setting a border in cascade:
this affects text and divs positions.
.grids {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr);
background: #222;
height: 326px;
width: 455px;
color: white
}
.grids > div {
border: 4px red solid
}
<div class="grids">
<div>f</div>
<div>f</div>
<div>f</div>
<div>f</div>
<div>f</div>
<div>f</div>
<div>f</div>
<div>f</div>
<div>f</div>
<div>f</div>
<div>f</div>
<div>f</div>
</div>
By using outline, the positions is unchanged:
.grids {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr);
background: #222;
height: 326px;
width: 455px;
color: white
}
.grids > div {
outline: 4px red solid;
}
<div class="grids">
<div>f</div>
<div>f</div>
<div>f</div>
<div>f</div>
<div>f</div>
<div>f</div>
<div>f</div>
<div>f</div>
<div>f</div>
<div>f</div>
<div>f</div>
<div>f</div>
</div>
There is a workaround way: use pseudo :after or :before in each column to apply background color to grid gap.
.grid-column::after {
position: absolute;
right: -20px; // grid-gap
top: 0;
height: 102px; // grid row height
width: 20px; // grid-gap
display: block;
content: '';
background-color: black !important;
}
If you don't know in advance how many columns will fit in your container, this is how I would do it (works for any number of columns and of any size. Also, this method do not style empty items):
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(80px, auto));
grid-auto-rows: minmax(80px, auto);
border-top: 1px solid #000;
border-left: 1px solid #000;
}
.grid-item {
border-bottom: 1px solid #000;
border-right: 1px solid #000;
}
/* not required */
.grid-item {
display: flex;
align-items: center;
justify-content: center;
background:#f5f5f5;
}
<div class="grid">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
<div class="grid-item">Item 6</div>
<div class="grid-item">Item 7</div>
<div class="grid-item">Item 8</div>
<div class="grid-item">Item 9</div>
<div class="grid-item">Item 10</div>
<div class="grid-item">Item 11</div>
<div>
You can also choose to leave out the grid gaps and use the border on the underlying div like so:
CSS:
.grid {
display: inline-grid;
border: red solid;
width: 200px;
height: 100%;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
.grid div {
border: red solid;
}
and the HTML:
<div className="grid">
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
</div>
I believe this achieves what you wanted to achieve:
Setting background-color on grid will color your gaps.
For example:
section {
display: grid;
grid-gap: 15px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
background-color: red;
}