I'm trying to create a flexible CSS grid to display some cards. I've set my CSS code for the cards to repeat and auto-fill to a minimum of 330px and a max of 1fr. Everything is fine, but now I have a card that I require to be a little bigger, at 2fr. The problem is very simple, but I can find a way to make this one card to be 2fr instead of 1fr.
Cards container
.cards-row{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
grid-column-gap: 15px;
}
<div class="cards-row" style="margin-top: 30px;">
<div class="card-wrap">
</div>
<div class="card-wrap">
</div>
<div class="card-wrap">
</div>
<div class="card-wrap">
</div>
<div class="card-wrap">
</div>
</div>
This is basically what I want to achieve
Make the last element to span 2 columns:
.cards-row {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
grid-gap: 15px;
}
.card-wrap {
height: 100px;
background: red;
}
.card-wrap:last-child {
grid-column: span 2;
}
<div class="cards-row" style="margin-top: 30px;">
<div class="card-wrap">
</div>
<div class="card-wrap">
</div>
<div class="card-wrap">
</div>
<div class="card-wrap">
</div>
<div class="card-wrap">
</div>
</div>
Related
I am trying to learn the CSS grid, but having trouble with what seems like it should be a basic repeat. Consider the following; I have 3 div elements in a header tag. I want the first div to be at least 450px and the remaining div elements (which could be 2, 3 or 4) to all be equal parts of the remaining space.
I assumed the following would work, but it seems it's not as straightforward as I thought. What am I missing?
header {
display: grid;
grid-template-columns: minmax(450px, 1fr) repeat(auto-fill, 1fr);
grid-gap: 1rem;
}
<header>
<div>
<p>450px</p>
</div>
<div>
<p>1fr</p>
</div>
<div>
<p>1fr</p>
</div>
</header>
You can use auto-fit instead of auto-fill:
auto-fit
Behaves the same as auto-fill, except that after placing the grid items any empty repeated tracks are collapsed. An empty track is one with no in-flow grid items placed into or spanning across it. (This can result in all tracks being collapsed, if they’re all empty.)
header {
display: grid;
grid-template-columns: minmax(450px, 1fr) repeat(auto-fit, minmax(0, 1fr));
grid-gap: 1rem;
}
<header>
<div>
<p>450px</p>
</div>
<div>
<p>1fr</p>
</div>
<div>
<p>1fr</p>
</div>
</header>
<header>
<div>
<p>450px</p>
</div>
<div>
<p>1fr</p>
</div>
<div>
<p>1fr</p>
</div>
<div>
<p>1fr</p>
</div>
</header>
You need a column flow for this:
header {
display: grid;
grid-auto-flow:column; /* column flow */
grid-template-columns: minmax(450px, 1fr); /* first column */
grid-auto-columns:1fr; /* all remaining equal width */
grid-gap: 1rem;
}
<header>
<div>
<p>450px</p>
</div>
<div>
<p>1fr</p>
</div>
<div>
<p>1fr</p>
</div>
</header>
<header>
<div>
<p>450px</p>
</div>
<div>
<p>1fr</p>
</div>
<div>
<p>1fr</p>
</div>
<div>
<p>1fr</p>
</div>
</header>
I've been having problems to create multiple columns in my site using html and CSS with grid, for some reason the command grid-template-rows:2 does not create a second column, but when I try with flexboxes it does create multiple columns.
.first-container {
display: grid;
grid-template-rows: 2;
}
<form>
<div class="first-container">
<!--<div class = "tittle"><h1>Controle Digital Web 1.0</h1></div>-->
<div class="boxes-box-1">
<div class="subtittles">
<h3>Subtittle 1:</h3>
</div>
</div>
<div class="boxes-box-2">
<div class="subtittles">
<h3>Subtittle 2:</h3>
</div>
</div>
<div class="boxes-box-3">
<div class="subtittles">
<h3>Subtittle 3:</h3>
</div>
</div>
<div class="boxes-box-4">
<div class="subtittles">
<h3>Subtittle 4:</h3>
</div>
</div>
</div>
</form>
Results with the code:
img-grid
Results changing the code to display with flexboxes:
img-flex
You could try using this code:
.first-container {
display: grid;
grid-template-columns: auto auto auto auto;
/* grid-template-rows: 0px 0px; */
}
All the images are coming at the center, I Even tried with Justify-content-between, But if from the backend only two images come to the edges and the center space is empty.
<div class="mm-mkt-BadgeRow row mx-auto">
<sly data-sly-list.awardimages = "${aboutlo.Award_Image_LINK}">
<div class="col-4 pl-3">
<img src="${awardimages}" class="mm-mkt-BadgeOne" id="mm-mkt-badgeOne">
</div>
</sly>
</div>
.grid-row {
display: grid ;
justify-content: stretch;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
}
.grid-row div:nth-child(3n+2){text-align:center; }
.grid-row div:nth-child(3n+3){text-align:right; }
<div class="grid-row">
<div class"item1">1</div>
<div class"item2">2</div>
<div class"item3">3</div>
<div class"item1">1</div>
<div class"item2">2</div>
<div class"item3">3</div>
<div class"item1">1</div>
<div class"item2">2</div>
<div class"item3">3</div>
</div>
I need to use a grid layout but also need a horizontal line separating each row.
The only thing I've been able to find is applying a border to each cell, but this only works if there are enough cells to fill each row.
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
}
.box {
border-bottom: 2px solid #ffa94d;
padding: 1em;
}
<div class="wrapper">
<div class="box">One</div>
<div class="box">Two</div>
<div class="box">Three</div>
<div class="box">Four</div>
</div>
Is there a way to fix the above so that the entire row has a border?
Add a grid-gap equal to the width of your border then consider gradient to achieve this:
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-row-gap:2px;
background:
repeating-linear-gradient(to bottom,
transparent 0,
transparent 100px,
#ffa94d 100px,
#ffa94d 102px /*+2px here*/
);
}
.box {
padding: 1em;
}
<div class="wrapper">
<div class="box">One</div>
<div class="box">Two</div>
<div class="box">Three</div>
<div class="box">Four</div>
</div>
Another idea is to consider a pseudo-element that you add to the 1st,4th,7th .. (3n + 1)th element:
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
overflow:hidden;
}
.box {
position:relative;
padding: 1em;
}
.box:nth-child(3n + 1)::after {
content:"";
position:absolute;
bottom:0px;
left:0;
width:100vw;
height:2px;
background:#ffa94d;
}
<div class="wrapper">
<div class="box">One</div>
<div class="box">Two</div>
<div class="box">Three</div>
<div class="box">Four</div>
</div>
Imagine your table as a collection of cells (much like an excel spreadsheet). You can create a simple cell class that you append to each of your grid items to manipulate the cells without affecting the table data itself. Consider:
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-row-gap: 20px;
}
.cell {
position: relative;
border-bottom: 2px solid #ffa94d;
}
<div class="wrapper">
<!-- Here is your first row -->
<div class="cell">One</div>
<div class="cell">Two</div>
<div class="cell">Three</div>
<!-- Here is your second row -->
<div class="cell">Four</div>
<!-- You can extend the line by the number of cells per row -->
<div class="cell"></div>
<div class="cell"></div>
<!-- Organize your html into row groups to easily visualize them -->
<!-- This will produce a blank row with no line -->
<div></div>
<div>-- blank row --</div>
<div></div>
<!-- You can also control where the line begins and ends -->
<div class="box cell">First Column Only</div>
<div></div> <!-- No cells here.. We just want to underline the first column -->
<div></div>
<!-- 2nd and 3rd columns only -->
<div></div>
<div class="cell">Second Column</div>
<div class="cell">Third Column</div>
</div>
Note that I only used a grid-row-gap. If you introduce a grid-gap, or a grid-column-gap, your lines will be broken at the column gaps (this may be the desired effect in some cases).
It is true that this is a more involved method of controlling the horizontal lines separating the grid and less "programmatic" and more micro-management-esque but, it does provide great control over introducing the lines into your grid.
The other answers were great options too! I just wanted to provide my two cents.
This can be achieved with a pseudo element, absolutely positioned. It will override the grid-gap. You will have to set it to a wide width, which is only a little hacky, then set the overflow on the container to hidden.
body {
margin:0;padding:0;
}
.products {
display:grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
grid-gap:20px;
overflow:hidden;
border-bottom:1px solid black;
}
.card-product {
position:relative;
text-align:center;
}
.card-product:after {
content:'';
position:absolute;
border-bottom:1px solid black;
top:-20px;left:0;
height:1px;
width:1000%;
}
<section class="products">
<article class="card-product">
<h3 class="card-product__title">
Product Title
</h3>
<h4 class="card-product__sub">
Product Category
</h4>
</article>
<article class="card-product">
<h3 class="card-product__title">
Product Title
</h3>
<h4 class="card-product__sub">
Product Category
</h4>
</article>
<article class="card-product">
<h3 class="card-product__title">
Product Title
</h3>
<h4 class="card-product__sub">
Product Category
</h4>
</article>
<article class="card-product">
<h3 class="card-product__title">
Product Title
</h3>
<h4 class="card-product__sub">
Product Category
</h4>
</article>
<article class="card-product">
<h3 class="card-product__title">
Product Title
</h3>
<h4 class="card-product__sub">
Product Category
</h4>
</article>
<article class="card-product">
<h3 class="card-product__title">
Product Title
</h3>
<h4 class="card-product__sub">
Product Category
</h4>
</article>
<article class="card-product">
<h3 class="card-product__title">
Product Title
</h3>
<h4 class="card-product__sub">
Product Category
</h4>
</article>
</section>
The box class puts a border in the grid children, and you can make a grid children grow to fill any number of columns; below there's an example, where definig the class span3, the fourth grid child spans for 3 columns.
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
}
.box {
border-bottom: 2px solid #ffa94d;
padding: 1em;
}
.span3 {
grid-column-end: span 3;
}
<div class="wrapper">
<div class="box">One</div>
<div class="box">Two</div>
<div class="box">Three</div>
<div class="box span3">Four</div>
</div>
I am pretty new on CSS/Html/JS and want to create a series of Boxes (loaded from a json file) and display them horizontally. Something like This:
I tried to achieve this with the following code:
<style>
.wrapper {
display: grid;
grid-template-columns: auto auto;
}
.Product {
display: grid;
grid-template-columns: auto 1fr;
background-color: rgb(2, 121, 61);
padding: 10px;
}
</style>
<div class"Wrapper">
<div class="Product">
<div>Pos: </div><div id="pos">test1</div>
<div>Artikel: </div><div id="article">test2</div>
<div>Bezeichnung: </div><div id="name">test3</div>
<div>Menge: </div><div id="stock">test4</div>
<div>Einheit:</div><div id="einheit">test5</div>
<div>Lagerplatz:</div><div id="shelf">test6</div>
<div>Intern:</div><div id="barcode">test7</div>
</div>
<div class="Product">
<div>Pos: </div><div id="pos">test1</div>
<div>Artikel: </div><div id="article">test2</div>
<div>Bezeichnung: </div><div id="name">test3</div>
<div>Menge: </div><div id="stock">test4</div>
<div>Einheit:</div><div id="einheit">test5</div>
<div>Lagerplatz:</div><div id="shelf">test6</div>
<div>Intern:</div><div id="barcode">test7</div>
</div>
</div>
But the result looks like this:
As you can see the divs are not horizontal and the width fills the screen. I want the boxes to be horizontally aligned and not to stop at the screen end. If I could put the whole element into a horizontal scroll view I would be even happier. Thanks for your time.
In your product class use inline-grid...
.wrapper {
display: grid;
grid-template-columns: auto auto;
}
.Product {
display: inline-grid;
grid-template-columns: auto 1fr;
background-color: rgb(2, 121, 61);
padding: 10px;
}
<div class"Wrapper">
<div class="Product">
<div>Pos: </div><div id="pos">test1</div>
<div>Artikel: </div><div id="article">test2</div>
<div>Bezeichnung: </div><div id="name">test3</div>
<div>Menge: </div><div id="stock">test4</div>
<div>Einheit:</div><div id="einheit">test5</div>
<div>Lagerplatz:</div><div id="shelf">test6</div>
<div>Intern:</div><div id="barcode">test7</div>
</div>
<div class="Product">
<div>Pos: </div><div id="pos">test1</div>
<div>Artikel: </div><div id="article">test2</div>
<div>Bezeichnung: </div><div id="name">test3</div>
<div>Menge: </div><div id="stock">test4</div>
<div>Einheit:</div><div id="einheit">test5</div>
<div>Lagerplatz:</div><div id="shelf">test6</div>
<div>Intern:</div><div id="barcode">test7</div>
</div>
</div>
You specify the wrapper class wrong. You should put wrapper not Wrapper in the main div class. If you want a space between columns you can use grid-column-gap: 20px;