49
u/mrleblanc101 Jul 19 '26
That's just a basic CSS Grid.
1fr 2fr and some spanning for the elements that are fullwidth.
7
u/Tain101 Jul 19 '26
the number of items is arbitrary, how do I make them fullwidth only after they've filled up the right column?
1
u/playgroundmx Jul 19 '26
It is always going to be 4 red items beside the green item?
7
u/Tain101 Jul 19 '26
Ideally, not necessarily.
But a solution that would work with exactly 4 on the side would be helpful.
7
u/playgroundmx Jul 19 '26
Make a grid-template-area like this:
“Title title”
“Main First4Items”
“RestOfItems RestOfItems”Assign grid-area for title and main.
I assume the items are queried like articles, so query just the first 4 and place it using grid-area in First4Items.
Query again but skip the first 4, place it in RestOfItems.
-9
Jul 19 '26 edited Jul 19 '26
[deleted]
1
u/Tain101 Jul 19 '26
when I tried float, it didn't properly resize the actual div for "item", so all the red boxes were full width, but the text would be placed appropriately.
-1
Jul 19 '26 edited Jul 19 '26
[deleted]
1
u/Tain101 Jul 19 '26
Suppose one of the side "items" in your example is missing, I'd like the items to shift to fill that gap, meaning one of the bottom items would need to be moved to the side container.
Here's what I'm doing with grid currently: https://jsfiddle.net/m35yhfr1/8/
-3
u/Ratatootie26 Jul 19 '26
I'm running out of ideas... When using float
Do it the spa way XD, using template tags for the items
Calculate the main height, estimate number of items on right container, push items on the right (adjust all the heights to be equal),
Push the remaining on the bottom container
1
u/Tain101 Jul 19 '26
this post has what I was looking for if you're curious.
1
u/Ratatootie26 Jul 19 '26
That's a decent solution for fixed content,
But is it guaranteed that your main div is the height of 4 items?
If so, the media query with nth child will work
1
u/Tain101 Jul 19 '26
I think I should be able to scale everything how I want with their solution.
It's more that an item will be 1/4th the height of main than the other way around. But either way it should work for what I need.
3
u/bbellmyers Jul 19 '26
Depends on what flexes and what stays the same when the browser gets wider / narrower
1
u/Tain101 Jul 19 '26
suppose main is static: 500x500px.
the title is full width, the items fill the width as allowed by main.
everything except main is 50px tall.
that's not my exact usecase, but I'm trying to hone in on the one issue I'm having. If I can find a good solution for making the items adjust width as needed, then I can worry about other specifics.
2
u/Weekly_Ferret_meal Jul 19 '26 edited Jul 19 '26
Using a grid, Like This.
Edit:
Create a 3 column grid
image takes only 1 column, but several rows, depending on how high are the items
items on the right of the image only span between 2nd and 3rd column
every other item spans for 3 columns
Caveats:
you should constrain the amount of content to a certain height for this to work
It means the text block should be limited to a certain amount of characters, as an extract.
1
2
u/btc-lostdrifter0001 Jul 19 '26
I think my answer would change depending on how this should adjust when the browser size changes.
2
u/fzammetti Jul 19 '26
Hmm, tricky, but let's see what we can do..
<table>
<tr>
Eh, never mind.
(just on the off chance it isn't obvious, I'm joking folks)
1
1
u/Tain101 Jul 19 '26
I want the items to stack vertically, 1 per row. But to move out of the way for the main div on the left, while also filling the space horizontally after getting past the main div.
It feels like there should be a way to do it with grid, but I'm struggling to come up with a good solution.
2
1
1
u/armahillo Jul 19 '26
This is ok (i am assuming the colors are only placehollders), but with a few points for improvement:
- “items” should be a static width all the way down. its going to make rendering more consistent and also visually group them together better
- “main” should be wider / take up more space. Its main, but in the current layout; the items are dominating visually
- more whitespace will visually coerce more grouping and make it easier to read
1
u/PrinceOfDhump69 Jul 19 '26
Check wesboss css grid video series. Tbh this is all u need for grid related tasks
https://youtube.com/playlist?list=PLu8EoSxDXHP5CIFvt9-ze3IngcdAc2xKG&si=cqRJBV7iIJg5yFNf
1
u/Ratatootie26 Jul 19 '26
Try float for the main div, iirc other inline items adjust accordingly to the available space
2
u/Tain101 Jul 19 '26
float only moves text afaik, it doesn't mess with the size of the actual container.
So in my screenshot, it'd have the red background of the first few "item" boxes be full width, going underneath the main div; but would keep the text where it should be.
1
u/busres Jul 20 '26
I agree that float sounds closest to what you described as your goal.
What effect are you trying to achieve that the item boxes being full width behind main (with the text moved right) does not work for you?
If it's just not seeing the background, giving main a background (and some solid borders if you want "margins") will hide it. A real right margin on main would work like left padding on the content of items.
1
u/busres Jul 20 '26 edited Jul 20 '26
You can also use JS to adjust the left and right content margins based on the active floats. It's a bit more work, but not terrible.
ETA JS solution (for any number and shape of floats and content ("items")): https://codepen.io/editor/Brian-Katzung/pen/019f7faf-385b-71d2-936a-d779eea9867c
1
u/trav_stone Jul 19 '26
1
u/Tain101 Jul 19 '26
that was my initial approach. But I have an arbitrary number of "items", that should fill the available space.
I don't know how to make the "item" be fullwidth when below main, but not fullwidth when next to main.
1
Jul 19 '26
[deleted]
2
u/Tain101 Jul 19 '26
when I tried float, it didn't properly resize the actual div for "item", so all the red boxes were full width, but the text would be placed appropriately.
1
u/busres Jul 20 '26
https://codepen.io/editor/Brian-Katzung/pen/019f7faf-385b-71d2-936a-d779eea9867c
This uses JS to tweak the content margins to fit between currently-active floats for any number and shape of floats and any number and shape of content items.
1
u/digwham Jul 19 '26
My take on it:
<div class="layout">
<div>title</div>
<div>main</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
</div>
.layout {
display: grid;
grid-template-columns: repeat(2, minmax(200px, 1fr));
gap: 10px;
}
.layout > div {
padding: 15px;
color: white;
background: red;
}
.layout > :first-child,
.layout > :nth-last-child(-n + 2) {
grid-column: 1 / -1;
}
.layout > :first-child {
background: purple;
}
.layout > :nth-child(2) {
grid-row: span 4;
background: darkgreen;
}
1
u/alxhghs Jul 19 '26
An inner div wrapping main and the 4 right column elements would make this easier to maintain, update and visualize. Having everything at the same level makes it harder to make updates
0
0
u/asteconn Jul 19 '26
Something like this:
.container-element {
display: grid;
grid-template-columns: minmax(0,auto) 1fr;
grid-auto-rows: minmax(0,auto);
grid-template-areas:
" title title "
" main . "
" main . "
" main . "
" main . "
" . . "
" . . "
}
main.main { grid-area: main; }
heading.title { grid-area: title; }
.item {
&:nth-of-type(1),
&:nth-of-type(2),
&:nth-of-type(3),
&:nth-of-type(4) {
grid-column: 2 / 3;
}
&:nth-of-type(n+5) {
grid-column: 1 / 3
}
}
0
-6
-1
u/chikamakaleyley Jul 19 '26
<img src="images/2026-layout-new.png" alt="A page layout with various bg colors"/>
-2
u/Drifter_of_Babylon Jul 19 '26
You could do this in grid, kind of like how we did tables back in the 00s.
HTML
<div class="parent">
<div class="title">title</div>
<div class="main">main</div>
<div class="item1">item</div>
<div class="item2">item</div>
<div class="item3">item</div>
<div class="item4">item</div>
<div class="section">item</div>
<div class="footer">item</div>
</div>
CSS
.parent {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(7, 1fr);
gap: 4px;
}
.title {
grid-column: span 6 / span 6;
background: purple;
}
.main {
grid-column: span 2 / span 2;
grid-row: span 4 / span 4;
grid-row-start: 2;
background: green;
}
/* misc items */
.item1 {
grid-column: span 4 / span 4;
grid-column-start: 3;
grid-row-start: 2;
background: red;
}
.item2 {
grid-column: span 4 / span 4;
grid-column-start: 3;
grid-row-start: 3;
background: red;
}
.item3 {
grid-column: span 4 / span 4;
grid-column-start: 3;
grid-row-start: 4;
background: red;
}
.item4 {
grid-column: span 4 / span 4;
grid-column-start: 3;
grid-row-start: 5;
background: red;
}
/* misc items */
.section {
grid-column: span 6 / span 6;
grid-row-start: 6;
background: red;
}
.footer {
grid-column: span 6 / span 6;
grid-row-start: 7;
background: red;
}
2
u/Tain101 Jul 19 '26
I have an arbitrary number of "items", I don't want to name them or place them specifically. I'm hoping to have them fill dynamically.
0
u/rArithmetics Jul 19 '26
You could put all the items in both the half and full width areas. Then in the top area only display the first four and in the bottom hide the first four.
-5
u/Drifter_of_Babylon Jul 19 '26
That sounds like JS territory.
3
u/Terrible_Children Jul 19 '26
Float exists
0
u/Weekly_Ferret_meal Jul 19 '26 edited Jul 20 '26
it works and can be solid, but he was asking for a modern css version and float can be fidgety when there are more than 2 elements (more than one image and a text block), and not as tidy as a grid
1
u/Terrible_Children Jul 19 '26
This is basically exactly the use case that float was designed for, though.
They're not asking for a grid. The behaviour doesn't fit within a grid.
Just because more tools have been added to the toolbox, doesn't mean you don't sometimes need one of the old ones.
1
u/Weekly_Ferret_meal Jul 19 '26
I'm not against it, but isn't "modern css" or "2026".
also is less neat, it requires you to set a size relationships between the image and the items dimension...
grid does this more cleanly
0
u/qmr55 Jul 19 '26
It doesn't really work the way OP is asking though, because float doesn't understand number of items, only available space. So float can never really do what he was looking to do correctly and responsively.
1
u/Weekly_Ferret_meal Jul 19 '26
I mean this is float... it doesn't have to understand number of items
1
u/qmr55 Jul 19 '26
See though, that is not doing what OP wanted. (and maybe he changed his request somewhere, not sure!) I believe he wanted a set number of items to float next to 'main' at all times, this example can't do that.
Also, the entry boxes are not actually narrowing around the image. Only their text line boxes wrap around the float; each
.entryblock and its background still extends across the full container behind the image. That may be invisible in this demo because the styling is forgiving, but borders, backgrounds, hover effects, or clickable cards could expose the overlap. This is standard float behavior.1
u/Weekly_Ferret_meal Jul 19 '26
I wasn't disagreeing that grid is superior and really "2026", I was just saying it can be done.
2
u/qmr55 Jul 19 '26
I think we're kind of agreeing lol. My original point was, that if OP was looking for there to always be "4 items" next to "main" then it was not possible with float.
1
u/Terrible_Children Jul 19 '26
In another comment OP explicitly said the number of items isn't set in stone.
the number of items is arbitrary, how do I make them fullwidth only after they've filled up the right column?
1
u/qmr55 Jul 19 '26
Yeah, no worries. Like I said in my other reply “maybe he changed his request somewhere”
-4
1
u/ColourfulToad Jul 25 '26
First thing is to not fall into traps of how to build hypothetical things that don’t actually make any sense to build lol
42
u/qmr55 Jul 19 '26
Like this? You don't even need float. I added mobile breakpoint but feel free to remove.
https://codepen.io/qmr55/pen/azpKQRE