So, I can't seem to find a good way to do this, and Google hasn't helped much.
Basically, I have a UL with LI's, these LI all contain checkboxes with labels, each label can be of any length, and I want to present this in a table-like manner but flowing, so when the container width changes, the "grid" or table of items are reflowed to maintain the grid-like appearance. Here is an image that I hope explains:
See how the space for the "Small" in the first part is larger since the "Long option" won't fit, and then it does fit, the space for "Option" grows to the same size as the "Even longer option" to accommodate the new table/grid. And when all fit they all get their minimum size
So, just using flex these wouldn't line up. I am unsure whether "display: grid" could do this. Any ideas?
In my opinion, it is not possible with CSS alone in the grid system. But as you have already done correctly with the Flexbox system.
Why it doesn't work with grid?
You can align the grid system by columns and rows. What you want to do would theoretically only work with row alignment. Definitely not with the column template. Because the column affects the width of the rows below.
Because you wants flexible divbox lengths that adjust to the varying widths of the entire column, it is not possible with the grid system. Now you can say, hey, then I'll do it at row level. Yes, but then you would not be able to make breaks. For this reason, it is right to do what you want to do with the flexbox system.
Try this:
body {
margin: 20px;
}
.wrapper {
display: grid;
grid-gap: 0;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr) ) ;
color: #444;
}
.item {
border: solid 1px #444;
padding: 20px;
font-size: 20px;
}
<div class="wrapper">
<section class="item item1">Item 1</section>
<section class="item itemde">Item 1 Default</section>
<section class="item itemlt">Item 1 Longer than</section>
<section class="item itemltl">Item 1 longer than long</section>
</div>
With your HTML like this as you describe
<ul class="con">
<li>RICE</li>
<li>BEANS</li>
<li>PLANTAIN</li>
<li>POTATO</li>
<li>SUOP</li>
</ul>
Using Grid your CSS should be like so:
.con{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
li{
list-style: none;
border: 1px solid black;
}
The grid set the minimum and maximum size of an item in the grid and then auto-fits it to the grid container
You can play around with the minmax() values
You can use flex box, like this
.container {
background-color: aqua;
display:flex;
flex-wrap:wrap
}
.item {
background-color:red;
margin:1px;
}
<div class="container">
<section class="item">Item 1</section>
<section class="item">Item 1 Default</section>
<section class="item">Item 1 Longer than</section>
<section class="item">Item 1 longer than long</section>
</div>
is this not what you are looking for?
Here is with ul,Li : https://jsfiddle.net/gk0by3uj/1/
body {
margin: 20px;
}
.wrapper {
display: grid;
grid-gap: 0;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr) ) ;
color: #444;
}
.item {
border: solid 1px #444;
padding: 20px;
font-size: 20px;
}
Try this by adding to your wrapper class in div and body.
(This took two hours lol, really hoping it does the trick)
Here's the source I primarily used for help formatting the code.
Try;
function opt() {
document.getElementById("1").style.color = "#B1B1B1";
}
function sml() {
document.getElementById("2").style.color = "#B1B1B1";
}
function lng() {
document.getElementById("3").style.color = "#B1B1B1";
}
function vlng() {
document.getElementById("4").style.color = "#B1B1B1";
}
function reset() {
document.getElementById("1").style.color = "#000";
document.getElementById("2").style.color = "#000";
document.getElementById("3").style.color = "#000";
document.getElementById("4").style.color = "#000";
}
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
}
.grid-container>div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid black;
text-align: center;
padding: 12px;
}
.button-div {
text-align: center;
}
.button-div button {
font-size: 21px;
}
<div class="grid-container">
<div id="1" onclick="opt()">Option</div>
<div id="2" onclick="sml()">Small</div>
<div id="3" onclick="lng()">Long Option</div>
<div id="4" onclick="vlng()">Even Longer Option</div>
</div>
<br>
<br>
<div class="button-div">
<button onclick="reset()">Reset</button>
</div>
I am using a grid container on an html page; inside two adjacent divs in the grid I have some little divs. I want these little divs to appear at the same height so they are aligned across the page. I think that I've given them the same relevant properties, but they are sitting at slightly different heights, and the line spacing is different. Why this is happening and how to remedy it?
Relevant info: I'm looking at my HTML in Chrome.
Image of my uneven blocks:
image of divs at uneven heights
Relevant code:
The container is defined in CSS like this:
.container {
width: 100%;
display: grid;
grid-template-columns: 1fr 2fr 2fr 4fr 1fr;
height: 400px;
background-color: lightgreen;
}
The two columns of the container where the problem arises are columns 3 and 4 (2fr and 4fr columns). Those divs are defined as:
.wordDisplay {
padding-top: 100px;
text-align: center;
}
.display {
padding-top: 100px;
}
And the little blue-box divs that I want to appear at the same height are:
.a {
display: inline-block;
width: 50px;
height: 50px;
padding-top: 20px;
margin: 1%;
border: 1px solid blue;
background-color: lightgreen;
font-size: 20px;
text-align: center;
}
.a:hover {
background-color: yellow !important;
}
.b {
display: inline-block;
width: 150px;
height: 50px;
padding-top: 20px;
margin: 1%;
border: 1px solid blue;
background-color: lightgreen;
font-size: 20px;
text-align: center;
}
.b:hover {
background-color: yellow;
}
Remove margins to get full height, The problem is, you're using margin for the wrong purpose
margin has different behavior, you have to be careful while using it.
Ask yourself why I want to use it here.
Your use of it as a value does not mean the expected result because it depends on your code scenario.
I recommend you to read this article
to ensure that you understand margins clearly, you will know what issue is happened
it's something dirty call margin collapse
there are two fixes I will recommend for your situation:
If your HTML like that:
<div class="container">
<div class="wordDisplay">
<div class="b">
band
</div>
<div class="b">
band
</div>
</div>
<div class="display">
<div class="a">
b
</div>
<div class="a">
a
</div>
<div class="a">
n
</div>
<div class="a">
d
</div>
<div class="a">
b
</div>
<div class="a">
a
</div>
<div class="a">
n
</div>
<div class="a">
d
</div>
</div>
</div>
Change margin for class "a" to half of margin in class "b" so if you add margin:1% in class "b" change the value of margin in class "a" to 0.5% so that will solve your problem.
Change grid template columns for column 3 and 4 to two equals fractions like that
.container {
width: 100%;
display: grid;
grid-template-columns: 1fr 2fr 4fr 4fr 1fr;
height: 400px;
background-color: lightgreen;
}
I am using grid. I centered my items but i want left position to be same on cross axis.
.box {
display: grid;
grid-template-columns: 1fr;
padding: 10px;
border: 1px solid blue;
gap: 1rem;
justify-items: center;
}
img {
width: 200px;
}
<div class="box">
<img src="img/featured.jpg">
<div class="item2">Item 2 Lorem</div>
</div>
Note : i want solution in only grid. There is many temporary fixes for that but i don't want that because i am looking for a perfect standard grid alignment solution for it.
You can do it a few ways:
1. Fixed Width Text (Not Responsive)
Based on the information you gave in your question. you can simply set the width of the item2 div to be the same as the image, e.g.:
.box {
display: grid;
grid-template-columns: 1fr;
padding: 10px;
border: 1px solid blue;
gap: 1rem;
justify-items: center;
}
.item2,
img {
width: 200px;
}
<div class="box">
<img src="https://via.placeholder.com/200x150">
<div class="item2">Item 2 Lorem</div>
</div>
2. The Responsive Way
This will allow us to responsively set up the 2 separate alignments you require: centre the container element, and left-align its contents, e.g.
<div class="box">
<div class="boxcontent">
Content here...
</div>
</div>
CSS: .boxcontent { text-align: left; }
Why this works:
You must have a defined relationship between the image and text, otherwise there is no way to tell the grid that these 2 individual elements must be positioned in relation to each other. You can do this by putting them in a container.
If you think about it, you are trying to do 2 separate alignments here:
make the image and text be centred in relation to the grid but also
make them be in alignment with each other so they are left aligned.
Putting them in a container achieves both of these objectives by creating a relationship between the image and text so that:
they act as a single unit in relation to the grid and also
allow them to be positioned in relation to each other regardless of the grid
Working Example:
.box {
display: grid;
grid-template-columns: 1fr;
padding: 10px;
border: 1px solid blue;
gap: 1rem;
justify-items: center;
}
.boxcontent {
text-align: left;
}
img {
width: 200px;
}
<div class="box">
<div class="boxcontent">
<img src="https://via.placeholder.com/200x150">
<div class="item2">Item 2 Lorem</div>
</div>
</div>
.box {
display: block;
margin: 0 auto;
width: max-content;
padding: 10px;
border: 1px solid blue;
}
img {
width: 200px;
}
.item2 {
margin-top: 1rem;
}
<div class="box">
<img src="pic_trulli.jpg" alt="Hi dear">
<div class="item2">Item 2 Lorem</div>
</div>
I have the problem during zooming in browser. I split "details__view" to two grid columns but during zooming these columns do not keep their position and width. I tried to use position: absolute, and position:relative but then the division into columns completely disappears. Here is my html:
<div className="box__details">
<div className="details__container">
<div className="details__container--title">Details</div>
<div className="details__view">
<div className="label">Name</div>
<div className="value">XYZ</div>
</div>
<div className="details__view">
<div className="label">Second Name</div>
<div className="value">XYZ</div>
</div>
<div className="details__view">
<div className="label">Country</div>
<div className="value">XYZ</div>
</div>
</div>
</div>
and CSS:
.box__details {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 30px;
}
.details__container {
border: 1px solid #eee;
padding: 10px;
border: 1px solid #eee;
}
.details__container--title {
padding-bottom: 15px;
}
.details__view {
display: grid;
grid-template-columns: .4fr .4fr;
padding-bottom: 15px;
}
.label {
padding-left: 5px;
}
.value {
text-align: left;
}
Do you have any ideas how can I make labels and values do not change during zooming? Thank you in advance for help!
The columns do not keep their position because you're using fr. This makes the box stay in the place you put it in on the screens proportion thus moving the right a little left when zooming in (Kinda like using %). To make it stay in place you may have to use something like px;
By changing grid-template-columns: 1fr 1fr; to something like grid-template-columns: 427px 427px;
I have a flex container with multiple flex items, 2 of which I need to flex grow based on the text so all divs space out the same way.
I was able to accomplish this like this:
<div class="outer product-grid">
<div class="inner product-component">
<a class="image"><img class="product-image" /></a>
<a class="upper-text title">
Short Upper Text
</a>
<div class="lower-text author">
Short Lower Text
</div>
<h5 class="price"> <span>price</span> </h5>
</div>
<div class="inner">
<a class="image"><img class="product-image" /></a>
<a class="upper-text">
Long Upper Text - Long Upper Text
</a>
<div class="lower-text">
Long Lower Text - Long Lower Text
</div>
<h5 class="price"> price </h5>
</div>
<div class="inner">
<a class="image"><img class="product-image" /></a>
<a class="upper-text">
Even Longer Upper Text - Even Longer Upper Text
</a>
<div class="lower-text">
Even Longer Lower Text - Even Longer Lower Text
</div>
<h5 class="price"> price </h5>
</div>
</div>
SCSS
.outer {
display: flex;
flex: wrap;
.inner {
border: 5px solid yellow;
display: flex;
text-align: center;
margin-right: 1em;
margin-bottom: 1.5em;
width: 200px;
flex-direction: column;
font-size: 1.00em;
a.image{
border: 5px solid orange;
img {
width: em(160px);
height: em(210px);
}
}
a.upper-text {
border: 5px solid red;
flex: auto;
margin: 0.2em auto;
line-height: normal;
}
.lower-text {
border: 5px solid green;
flex: auto;
}
}
}
My upper-text and lower-text need to be different sizes. When I put a font-size into either of those classes, I lose the whole flex grow.
You can try on my codepen https://codepen.io/mxdavis/pen/KxxmKE by inserting font-size: 20px; to between line 24 and 25 (in the a.upper-text class) and you will see the red border no longer ends at the same point like it does when the font is not adjusted. https://codepen.io/mxdavis/pen/dqqzMy
I need the even sized boxes, and the adjusted font size. Flex seems to be the easiest route since upper-text and lower-text cannot be predicted.
Any advice is greatly appreciated.
Thanks!
Update: I realize now if I play with the text sizes and don't make upper and lower texts equal even my first code snippet doesn't work, which is probably why a font increase is throwing it off. Is there a way to accomplish this or should I just set a fixed height and then click to reveal more? https://codepen.io/mxdavis/pen/KxxedE
I was able to accomplish this (for the most part) using flex and grid together.
I still have to guestimate a max template row for unpredictable text but at least I can guarantee the starting points with this.
https://codepen.io/mxdavis/pen/KxxedE
Here's the new css with the .inner now using display: grid instead of flex.
.outer {
display: flex;
flex-flow: row wrap;
.inner {
border: 5px solid yellow;
display: grid;
grid-template-rows: 210px minmax(max-content, 3fr) minmax(max-content, 2fr) 30px;
grid-row-gap: 5px;
text-align: center;
margin-right: 1em;
margin-bottom: 1.5em;
width: 150px;
font-size: 1.00em;
a.image{
border: 5px solid orange;
img {
width: em(160px);
height: em(210px);
}
}
a.upper-text {
border: 5px solid red;
line-height: normal;
}
.lower-text {
border: 5px solid green;
}
.price {
border: 5px solid blue;
margin: 0;
}
}
}
I still would be interested to see how to rely ONLY on the most content for that row, without using tables.