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; */
}
Related
I have a code pen at https://codepen.io/james-hudson3010/pen/wveJqXd
What I am looking to achieve is the following:
I have an arbitrary number of cells. This example only uses 10, but it could be more or less than 10
Each cell has a footer which needs to be aligned to the bottom of cell so that they are aligned across cells in the same row
The height of a cell can vary, but the height needs to be stretched so every cell in the same row has the same height to support #2
This almost works perfectly using Safari ( Version 14.1.2 (15611.3.10.1.5, 15611) ), but the last cell in the last row is wider than it should be.
The behavior is worse in Chrome ( Version 93.0.4577.63 (Official Build) (x86_64) ). The rows are drawn higher than they should be. The last cell in the last row is to wide.
Is this due to a lack of complete browser support?
If this is due to not specifying my css correctly, what do I need to do?
.example1 {
display: grid;
grid-template-columns: repeat(auto-fill, 300px);
align-items: stretch;
}
div {
border: solid 1px;
padding: 1rem;
}
.contentdiv {
background-color: red;
display: table;
height: 100%;
width: 100%;
}
.foot {
display: table-row;
vertical-align: bottom;
height: 1px;
}
<div class="example1">
<div class="contentdiv">1<br/>a<br/>a<br/>a<br/>a<br/>a<br/>
<div class="foot">bottom</div>
</div>
<div class="contentdiv">2
<div class="foot">bottom</div>
</div>
<div class="contentdiv">3
<div class="foot">bottom</div>
</div>
<div class="contentdiv">4
<div class="foot">bottom</div>
</div>
<div class="contentdiv">5a<br/>a<br/>a<br/>a<br/>
<div class="foot">bottom</div>
</div>
<div class="contentdiv">6
<div class="foot">bottom</div>
</div>
<div class="contentdiv">7a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>
<div class="foot">bottom</div>
</div>
<div class="contentdiv">8
<div class="foot">bottom</div>
</div>
<div class="contentdiv">9
<div class="foot">bottom</div>
</div>
<div class="contentdiv">10a<br/>a<br/>a<br/>
<div class="foot">bottom</div>
</div>
</div>
This has to do with the setting the display to table for the contentdiv - and setting it's width and height to 100%.
Basically what is happening - if you view your elements in the web inspector - you'll see that all of your elements are wider than 300px because of the padding 1rem, so they are actually overlapping already, you just can't visually see it until the last row.
You can avoid this setting, * { box-sizing: border-box } and the display to flex instead, and using the justify-content property to keep the foot aligned on all rows:
* {
box-sizing: border-box;
}
.example1 {
display: grid;
grid-template-columns: repeat(auto-fill, 300px);
align-items: stretch;
}
div {
border: solid 1px;
padding: 1rem;
}
.contentdiv {
background-color: red;
display: flex;
flex-direction: column;
justify-content: space-between;
/* Avoid the borders stacking */
margin: -1px;
}
<div class="example1">
<div class="contentdiv">1<br/>a<br/>a<br/>a<br/>a<br/>a<br/>
<div class="foot">bottom</div>
</div>
<div class="contentdiv">2
<div class="foot">bottom</div>
</div>
<div class="contentdiv">3
<div class="foot">bottom</div>
</div>
<div class="contentdiv">4
<div class="foot">bottom</div>
</div>
<div class="contentdiv">5a<br/>a<br/>a<br/>a<br/>
<div class="foot">bottom</div>
</div>
<div class="contentdiv">6
<div class="foot">bottom</div>
</div>
<div class="contentdiv">7a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>
<div class="foot">bottom</div>
</div>
<div class="contentdiv">8
<div class="foot">bottom</div>
</div>
<div class="contentdiv">9
<div class="foot">bottom</div>
</div>
<div class="contentdiv">10a<br/>a<br/>a<br/>
<div class="foot">bottom</div>
</div>
</div>
From my comment,
display:table is not a good idea here (table-layout:fixed would be required for the width) and height : 1px (expanded cause of the table-layout display) is also not a good idea, while flex or grid will do this without sides effects minus the box-sizing:border-box missing to mind height:100% and padding/ border.To set that element at the bottom, flex or grid should be the way to IMHO
here is an example with grid instead table for display ;)
.example1 {
display: grid;
grid-template-columns: repeat(auto-fill, 300px);
align-items: stretch;
}
div {
border: solid 1px;
padding: 1rem;
box-sizing:border-box;
}
.contentdiv {
background-color: red;
display: grid;
height: 100%;
}
.foot {
margin-top:auto;/* push it all the way down */
}
<div class="example1">
<div class="contentdiv">1<br/>a<br/>a<br/>a<br/>a<br/>a<br/>
<div class="foot">bottom</div>
</div>
<div class="contentdiv">2
<div class="foot">bottom</div>
</div>
<div class="contentdiv">3
<div class="foot">bottom</div>
</div>
<div class="contentdiv">4
<div class="foot">bottom</div>
</div>
<div class="contentdiv">5a<br/>a<br/>a<br/>a<br/>
<div class="foot">bottom</div>
</div>
<div class="contentdiv">6
<div class="foot">bottom</div>
</div>
<div class="contentdiv">7a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>
<div class="foot">bottom</div>
</div>
<div class="contentdiv">8
<div class="foot">bottom</div>
</div>
<div class="contentdiv">9
<div class="foot">bottom</div>
</div>
<div class="contentdiv">10a<br/>a<br/>a<br/>
<div class="foot">bottom</div>
</div>
</div>
Not clear about the requirement you have put in ,if you are expecting this ()
Also you can better play around with flex property which is easier
grid image sample
if so I just changed the height in class contentdiv to inherit.
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'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>
I'm starting to work with CSS Grid, I've been reading about the properties to help with responsiveness; so I'm trying to build a small grid with 6 elements; my intention is for them to show as 2 rows on larger devices like this:
And also to show them all stacked on smaller devices,so everything is good regarding the smaller devices, I'm using auto-fill so it stays responsive, however if I the view the page on a laptop screen or desktop it is able to fill one more column and ends up looking like this:
This is my grid layout code.
display: grid;
grid-template-columns: repeat(auto-fill, 260px);
justify-content: center;
row-gap: 18px;
column-gap: 18px;
Is there a way to keep the responsive behavior but setting a max number of columns as well? Any help is appreciated; If it can only be done with media-queries that's fine, but I'm first trying to look for ways to do it without using those. Also, I kinda made it work as intended by setting a horizontal padding to the whole grid container to compensate for the size of the additional column; but again, if there's a better way I'm all ears. Thank you!
Working Example
https://codepen.io/IvanS95/pen/NEYdxb
Use this syntax:
grid-template-columns: 260px 260px 260px;
Or
grid-template-columns: repeat(3,260px);
Instead of this:
grid-template-columns: repeat(auto-fill, 260px);
Use media queries to set less columns on smaller screens.
Also if the row and column gap is the same you can use grid-gap.
Documentation
.grid-container{
display: grid;
grid-template-columns: 260px 260px 260px;
grid-gap: 18px;
background-color: #fff;
color: #444;
justify-content: center;
}
.card {
border: 1px solid #000;
width: 260px;
height: 260px;
}
<div class="container">
<div class="grid-container">
<div class="grid-item">
<div class="card"></div>
</div>
<div class="grid-item">
<div class="card"></div>
</div>
<div class="grid-item">
<div class="card"></div>
</div>
<div class="grid-item">
<div class="card"></div>
</div>
<div class="grid-item">
<div class="card"></div>
</div>
<div class="grid-item">
<div class="card"></div>
</div>
</div>
</div>
Add this code to your CSS:
grid-template-columns: auto auto auto;
you just need to wrap them separately.
<div class="grid-container">
//grid-items
</div>
<div class="grid-container">
//grid-items (2nd row)
</div>
our same style code works until grid-container wraps.
In your code, white this html. Other, same css should work.
.grid-container{
display: grid;
grid-template-columns: repeat(auto-fill, 260px);
justify-content: center;
row-gap: 18px;
column-gap: 18px;
}
.card {
border: 1px solid #000;
width: 260px;
height: 260px;
}
<div class="container">
<div class="grid-container">
<div class="grid-item">
<div class="card"></div>
</div>
<div class="grid-item">
<div class="card"></div>
</div>
<div class="grid-item">
<div class="card"></div>
</div>
</div>
<div class="grid-container">
<div class="grid-item">
<div class="card"></div>
</div>
<div class="grid-item">
<div class="card"></div>
</div>
<div class="grid-item">
<div class="card"></div>
</div>
</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;