This question already has answers here:
How to select a range of elements in repeated pattern
(2 answers)
Select every Nth element in CSS
(4 answers)
Closed 2 years ago.
I am looking for a way to right-justify specific columns (not all columns) in a grid in CSS without having to explicitly specify a special class or style for each column entry. For example:
<style>
.myclass {
display: grid;
grid-template-columns: 100px 100px 100px 100px;
}
</style>
<div class="myclass">
<span>AAAA</span>
<span>BBBB</span>
<span>CCCC</span>
<span>DDDD</span>
<span>EEEE</span>
<span>FFFF</span>
<span>GGGG</span>
<span>HHHH</span>
</div>
So, I want the first and third columns right justified, and the second and fourth columns left justified without having to explicitly specify style or class for each span.
Thanks!
nth-child selector can do the trick
.myclass {
display: grid;
grid-template-columns: 100px 100px 100px 100px;
grid-gap: 10px;
}
span:nth-child(2n+1) {
background: #eee;
display: flex;
justify-content: flex-end;
}
<div class="myclass">
<span>AAAA</span>
<span>BBBB</span>
<span>CCCC</span>
<span>DDDD</span>
<span>EEEE</span>
<span>FFFF</span>
<span>GGGG</span>
<span>HHHH</span>
</div>
Related
This question already has an answer here:
Filling empty cells in CSS Grid Layout
(1 answer)
Closed 2 years ago.
I need to display a grid of items in a container with variable width. All items are either have a column span width of 1 or 2. Is it possible in pure CSS to dynamically order the items so that 1-column width items move to fill gaps in rows above when there isn't enough room for a 2-column width item that would otherwise precede it?
The closest working example I have is here.
.box {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
column-gap: 10px;
row-gap: 10px;
}
.box>div {
background: #ddd;
height: 80px;
border: 1px solid #000;
}
div.long {
grid-column-start: auto;
grid-column-end: span 2;
}
<div class="box">
<div></div>
<div></div>
<div class="long"></div>
<div></div>
<div></div>
</div>
The problem is the gap seen in the 3-col wide state. The long item doesn't have room to wrap so a gap is preserved instead. Is it possible to promote eligible items to fill the gap?
2-col wide:
3-col wide:
4-col wide:
Per Temani's comment the answer is to add grid-auto-flow: dense; to container element.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I'm trying to have a grid as shown below. The problem is that I don't know how to combine the responsiveness and the auto generated columns with items that should have different widths.
I know that I can create a responsive grid with
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))
or an implicit grid with different sizes like
grid-template-columns: minmax(300px, 1.5fr)) minmax(300px, 1fr)) minmax(300px, 1fr)) minmax(300px, 1.5fr))
But that does not auto wrap on smaller screens.
How can I combine these? Can I use the grid-column attribute on an individual item to achieve this?
or is this a wrong approach and it would be better to use the flex system in this case?
You can't use differently sized cells and also use auto-fit or auto-fill to define their behavior upon resizing.
However, to get precisely what your diagrams show, you can enclose your first two and last two divs in their own div, since taken together they are the same size, and use auto-fill on the outer divs:
.container {
padding: 5px;
border: 3px solid green;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
gap: 5px;
}
.cell {
display: flex;
justify-items: stretch;
gap: 5px;
}
.cell div {
border: 3px solid black;
}
.large {
flex-grow: 3;
}
.small {
flex-grow: 2;
}
<div class="container">
<div class="cell">
<div class="large">One</div>
<div class="small">Two</div>
</div>
<div class="cell">
<div class="small">Three</div>
<div class="large">Four</div>
</div>
</div>
So again, this wraps the first two cells and last two cells in their own respective divs, which creates two equivalent cells in the grid. You can then use an auto-fill on these outer divs.
You can make each of the two grid cells a flex display to format the two internal divs. Use flex-grow to size the internal divs by a 3:2 and 2:3 ratio, respectively.
It isn't a very flexible solution, because the outer divs still have to be sized in a repeatable pattern. But in your case, they are, so it solves this specific problem — assuming that you can change your HTML.
This question already has answers here:
What is the default padding and/or margin for a p element (reset css)?
(5 answers)
Closed 3 years ago.
And why is a grid row <p> different then a grid row <div> ???
Sorry if it's something obvious but it just doesn't make any sense to me XD
.container {
display: grid;
grid-auto-rows: 20px;
grid-auto-columns: auto;
grid-row-gap: 5px;
}
.box {
display: block;
border: 1px solid black;
background-color: lightgreen;
}
<div class="container">
<p class="box">test</p>
<div class="box">test</div>
<div class="box">test</div>
</div>
The largest difference between using <p> and <div> USED TO BE that you cannot nest additional elements inside <p> the way you can using <div>. However, the <p> tag seems to have become more forgiving in HTML5, making this allowable - any phrasing elements (including images and other <p> tags) work fine. The main reason to pick one over the other in MODERN DAY is 1) It marks a semantic difference, making the code more readable by others, and 2) <p> by default adds a margin above and below the paragraph, while <div> adds no additional margin.
The height of the p element is 0. I'm not exactly sure why but the grid-auto-rows rule for the grid container is causing it. Without it, the p balloons to 50px hight, including padding.
This padding is something the browser set. I like to use a css reset. They are simple CSS rules that undo the common problems these default styles cause. There are SEVERAL of these and people prefer different resets for different reasons. I rather like this one
EDIT: fixed code snippet.
.container {
display: grid;
grid-auto-rows: 20px;
grid-auto-columns: auto;
grid-row-gap: 5px;
}
.box {
display: block;
border: 1px solid black;
background-color: lightgreen;
margin: 0;
padding: 0;
}
<div class="container">
<p class="box">test</p>
<div class="box">test</div>
<div class="box">test</div>
</div>
This question already has answers here:
How to adapt div's width to content with flexbox
(4 answers)
How to change flexbox wrap?
(2 answers)
Targeting flex items on the last or specific row
(10 answers)
Closed 5 years ago.
I have what seems like a simple CSS question but has been rather vexing for me as a styles newbie. Any help is really appreciated. I tried to find another example on Stack Overflow and couldn't which surprised me, so if this is a dupe pls point me in the right direction.
I have a container element that contains some text and a list of elements with fixed dimensions.
<div class='container'>
<p> Title </p>
<div class='item'>1</div>
<div class='item'>2</div>
<div class='item'>3</div>
<div class='item'>4</div>
</div>
I don't know how many items I will actually have - it might be 3 - 9. I want the container to be centered on the page and the heading to be centered above the items, but I want the items to be added left to right. I want the items to align left so that they appear centered under the heading and on the page when the row is full, but should appear from left to right if a row is not full. So if the screen can fit three and there are four, the fourth should align with the first element and not be in the middle.
.container {
margin: 0 auto;
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
p {
margin: 0 auto;
text-align: center;
justify-content: center;
align-self: center;
display: block;
}
.item {
flex: none;
width: 200px;
height: 100px;
background-color: red;
margin: 20px;
}
The issue I'm having is that I can center the text, but because the width of the parent is not based on the width of the children, it always appears slightly off center. So, I read that I can force the parent's width to be based on the children's width by setting display: inline-flex on the parent. This accomplishes that, but unfortunately that then forces the heading to be in-line with the items, which defeats the purpose. The only reason I need the width of the parent to be calculated based on children's width is so that the text will know how to center itself inside the parent.
Any help would be really appreciated. I don't need to use flexbox - any other approach that works would be great...this is just the latest in a series of different things I've tried.
If i understood the question correctly, you were on the right track, setting display:block on the p was a good idea, but you also need to set width:100% so it won't stay inline with the other items.
See below or jsFiddle
.container {
margin: 0 auto;
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
p {
width: 100%;
margin: 0 auto;
text-align: center;
justify-content: center;
align-self: center;
display: block;
}
.item {
flex: none;
width: 200px;
height: 100px;
background-color: red;
margin: 20px;
}
<div class='container'>
<p> Title </p>
<div class='item'>1</div>
<div class='item'>2</div>
<div class='item'>3</div>
<div class='item'>4</div>
</div>
This question already has answers here:
How can I align one item right with flexbox?
(5 answers)
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
How does flex-wrap work with align-self, align-items and align-content?
(2 answers)
Closed 5 years ago.
According to the spec, and several blogs, the 'align-self' overrides the 'align-items' property of its parent. In the CodePen example, I have used flex-direction: column because align-self only applies to the cross axis. I haven't been able to get rid of the extra white space. I know I could just make each li a container, and align items within them, but I'm really trying to solve with without creating more containers, if possible.
The last item aligns to the end nicely, but everything in between the first and last act almost like 'space-around' but I realize it's really a column that forces each item to wrap. If I remove any alignment properties, the combo of column and flex-wrap causes the items to "distribute". It could be this is a limitation of the flexbox spec... but I'm not sure.
* { box-sizing: border-box; }
ul {
list-style-type: none;
padding: 0;
display: flex;
align-items: flex-start;
border: 1px solid black;
li {
display: flex;
justify-content: center;
width: 100px;
border-right: 1px solid black;
&:last-of-type {
align-self: flex-end;
}
}
}
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>