Can anyone help me with this layout?
Hi, I want to achieve this kind of layout I already have. The problem is that AI made it and I didn't understand anything and I am also sure there is a better way to do it. In fact I can't even move the year margin bottom up or details around without moving the entire block of elements. You can create a code pen with a similar example if you want.
102 Replies
Please make a codepen so we can see the code (no, a screenshot doesn't count).
In addition, what are you trying to accomplish that isn't already done? What's your desired output?
Lastly, using AI to "learn" is a really bad idea. The only thing you're learning is to rely on a bad language model that lies to you frequently, and even when it doesn't lie it give bad code
How do i make a code pen in react? what exactly do i need to pass in it?
the desired output is human helping me and showing me a better way because this one feels wrong
Click on the gear icon in the JS tab and search for React in the last search box. It'll import it to your pen. Though what you showed shouldn't need React, that's super easy with HTML and CSS. It's just a list with seperation lines
this is small part of an entire project made with react
In my experience, 78% of all projects that use React don't need it. React was designed by FB to solve FB-scale issues. Not many webapps are at that scale. I'd suggest making it in HTML/CSS first, then you should be able to "translate" to React if need be.
Doubt that nowadays companies hire vanilla JS devs and also React seems very useful to use in my opinion even for small apps
listen, you're struggling with the base languages; don't overcomplicate
get a good foundation, then """"upgrade"""" to react
"Useful" but bloated, IMO. But if you're doing it to get a job then that makes perfect sense, yeah. Sadly companies are more worried about FOMO then they are about making quality, sustainable code 😭
I just struggle with CSS, nothing to do with JS or React
each result is a list
If you can't do it in HTML/CSS you won't be able to do it in React
where is the mistake?
it's not exactly a mistake, but it's very sub-optimal
Epic is just saying (and I agree) that React is adding too much extra work that doesn't acutally help solve the issue. Start small and do the little steps first. You can always "upgrade" to React code later
it's not just that
each search result is a whole new list
then it has an
<li>
and then it has a <div>
it's a misuse of the <ul> and it's an unnecessary <div>
to me, this looks like you were struggling to get it to work, so, you just did what you could to get it to work
just use the <ul> at the parent, then everything goes in the <li>Im following a course and trying to re-create some projects the guy did to learn. And without even remembering that. Guess what. He uses also a div inside the li
but if you can do it better show me
i just told you a better way
Using a
div inside an li is bad practice and unnecessary. Sorry to say, but it sounds like your guy isn't much of an HTML proif you want to make it into a grid, the <li> is perfectly capable of that
Jonas Schmedtmann
also, personally, aside from everything, im not sure if the <h3> is the best tag for the title
Im trying to pass everything i have in that code pen
how are these stuff honestly that important? for SEO?
0
it's search results
it won't be in the html when you load the page
google won't fill the form, so, for seo, it's 0
unless you use the "classical" way of doing things where a search is a whole different page
there, it would matter for seo
for this? search engines won't see anything, so, it doesn't matter what you do
BUT!!!!!
the document hierarchy will change when you do that, and i'm not exactly sure of how assistive technologies will work with it
don't know if they will go hay-wire or just put extreme emphasis on the title
Im not capable of passing my react project in code pen because its divided into different components then idk what to put in the html. Are you able to create one code pen yourself even in Javascript with the same UI? its just a div with a few elements
just go on the element inspector and copy the outer html of the element
done but i need to add a css stuff
just throw the relevant css there
including any css resets
I dont understand why the divs arent of the same size of the search bar. I threw in all the relevant css and js
you don't need the js for this
but the icon is missing on the right side
i guess i need to import it
let me find it again
i dont have the head in the html to import it
honestly i never use code pen and it looks like a mess to pass all these things around
are you using fontawesome?
yes
by the way, delete the javascript while you're at it
where should i import the icon?
Here's my example of a minimal setup: https://codepen.io/13eck/pen/ogbPoad
It's just one result item, but should be enough to get you started and/or make a template to follow with your own data
so its possible to use div inside li?
anyway thanks
It is, yes
never said it wasn't
But you had:
Your
div was a useless wrapperok another question. Where can i learn these types of layout? because i really forgot everything
It's not so much learning the layout…it's more thinking in boxes. HTML and CSS work in boxes, so you need to, too. Everything on the web is a box. Look at what you're trying to do and break it down into boxes. What does each box do? Then figure out what element to use for each box.
my problem is that i dont know when to use grid or flex anymore so ill just watch a video i guess
Looking at your first screenshot, I saw a box for the search, then a list of boxes for the results. Each result is a box with an image (one box) a description (another box) and a
+ button (yet a third box).
Since it's a list of results, that tells me to use a ul (and not a ol since it's doesn't need numbers). Then I though about how to make the li work. Then I just iterated on the code until I got to a semblance of what the image showed. I tried flexbox first, since that's my go-to. But then switched to grid since that results in less code.Kevin Powell
YouTube
2 common CSS layout misconceptions
👉 I’m hosting a free CSS Grid Workshop in my Discord on Friday, September 19th: https://discord.gg/Ww9VVyQbQY?event=1413592833742602321
There are a lot of CSS misconceptions out there in general, and today I’m tackling two of the biggest layout-related ones: How
flex: 1 works, and the idea that Flexbox is inherently simpler than Grid.
...And sometimes you just try one. If it doesn't do it for you then try the other
Mostly it's about knowing what the different options are for each one and picking the best tool for the job. In my example I went for grid b/c to get the horizontal layout it was super simple:
grid-template-columns: auto 1fr auto;. Flexbox required more codei would actually do the opposite:
1fr auto 1fr
but i agree with everything else
also, to make flex work with this, you gotta do a ton of work and overridingRight, which I did >_>
Then switched to Grid b/c I knew that grid was less verbose
and easier
Looks like 💩
and you can control it all from the parent, without messing with the children
then
32px auto 32px
or 16px on the last oneDoesn't really matter, it works. Ship it! lolol
i know, but it makes it so the size of the image is controller by the parent
with a min-width: 100% on it, should do the trick
I also thought in terms of boxes. But then i dont understand how to position them
Was it possible to use a flexbox for all three elements with space btw and then inside the one with the info another one with column ?
of course not because i would have had the space
btw the pic and the info
lol
Most everything grid can do flex can do, too, yes. But grid is easier most of the time, I think
yeah, but it would be 4x the trouble
you basically will have to disable all the flex stuff from flexbox
the first child will have to have
flex: 0 0 32px, so it doesn't grow or shrink
the 2nd one needs to have flex 1 1 calc(100% - <gap size x 2> - 32px - 16px)
or just leave it at 1px
and the 3rd one needs flex: 0 0 16px
or 2chI think in 2025 you should default to grid. Then switch to flex if you need more micro-managing :think:
yes, a lot of it
people always say grid is never used
except stuff that look like grids
Honestly it comes down to a few things:
* Repetition
* Memorization
* MDN
The more you do something the more you'll know how to do it later. The more you do it the more you remember it. And for everything else, you look up on MDN. When I make codepen examples I spend like 72% of that time looking up stuff on MDN. It's more about knowin how to search and knowing what to search for
Since everything is a box on the web…isn't it all a grid? lol
a weirdly-shaped grid
in this case what would you search for on MDN?
I started by seaching for
grid which gave me this page. I then skimmed it and on the bottom I saw the "See also" and clicked on the Line-based placement with CSS grid. Skimming that I didn't see what I needed but on the sidebar I saw the aligning items and went there. Read that and it was what I was looking forAlso, if you're still very new to HTML and/or CSS, Kevin has a wonderful (and long :p) course free on YouTube: https://www.youtube.com/playlist?list=PL4-IK0AVhVjOJs_UjdQeyEZ_cmEV3uJvx
YouTube
HTML & CSS for Absolute Beginners
This is a free course that explores how you can create your very first website. It covers the basics of HTML & CSS. Assuming zero knowledge to start, it expl...
im not really a beginner but ill look into it
Otherwise, if you want to focus more on CSS b/c you know HTML, check out all of Kevin's free and paid courses on his website. Conquering Responsive Layout is a great (and free!) starting point. CSS Demystified and Beyond CSS are great, too, but paid
what are the most important things to know in css and html according to you?
That's…a good question. I'll have to think on it and get back to you
how to use mdn and google, instead of ai
there's a lot of tags, and an even bigger amount of css properties
also, practice
I 100% agree that "how to use MDN" is a vital skill to learn, yeah. But the hard part is knowing what to search. Though as I showed above sometimes knowing what to search for is only the beginning :p
AI is trash for css
i just knew the answers were fucked up and thats why i came here
AI can be helpful for figuring things out. I use it as a sounding board to point me in the right direction, but I never ask it for code. Things like, "what steps should I take to do X". Then I take those steps (with a grain of salt, of course ;p) and do the code myself. But GPT usually gives me at least the keywords to search MDN for
for programming languages it should be good, for boilerplate code
and for experienced devs
yeah, for boilerplate
but you probably can find that boilerplate online anyways
Nope. As you said, it sucks for CSS. Which is a programming language :p
LLMs only regurgitate code it already has. So unless there's a lot of examples out there it's just bad. There's a metric shittonne of React tutorials, blog posts, examples, etc so it knows React well—of course, there's no counting for the quality of the code it ingests, so again grain of salt. But as you've learned there's not a lot of good CSS content so it can't give good CSS code because it hasn't ingested good CSS code. It's just bad examples upon bad examples
but people use it in their workflow to generate a lot of code
so its already useful not total shit
but you need to spend time debugging
"Useful" is debatable. Lots of code doesn't mean good code
and there are also people who vibe code apps and they work and raise funds make money or whatever
And then after a few weeks there's a data breach and they shut down
Vibe coded apps are bad. Full stop. It's a get-rich-quick scheme. It doens't actually work long-term
And lots of people get hurt in the process
hope its like you say
but i just see it as a tool for devs that know what they do
not random people
LLMs are a paradox: in order to use them well you have to know more than the LLM. And if you know more than it does…it's less useful :p
You work in a company?
I'm an Amazon delivery driver
But I've been a hobby front-end dev since 1999 👴
well in some companies they already use AI for programming
Lots of companies do dumb things, yes
big ones not random ones ahah
why did you never enter the industry if i can ask
Company size doesn't change the fact that AI is dumb 🤷
Never found the right time. Tried a few times but I think my hatred of React has something to do with it 🤣
I don't think you can really judge it if you don't work in big teams, projects for a company and so on
Team size has nothing to do with it. AI is bad. Full stop. Just because a bunch of people do something dumb doesn't make it smart
Considering my age, I can actually judge. I've seen this a dozen times now. "This will totally change how things are done!" and then ::POP:: goes the bubble.
hope is like you say
React is amazing btw
In your opinion, sure. But I think it's over-engineered and bloated
dividing things into components make html and the structure of a website 10 times more clear
Then use native web components: https://developer.mozilla.org/en-US/docs/Web/API/Web_components
You don't need React for that
MDN Web Docs
Web Components - Web APIs | MDN
Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.
I 100% agree that components are amazing and awesome. I just 100% disagree that React components are great 🤷
Glad to see the Web Components love haha
Also my company uses AI
You know why? Because the managers punt all the client pressure to the devs and the only way to make any of the unrealistic deadlines is to rely on AI
So we're accruing a ton of tech debt because our managers don't know how to set client expectations. Just because companies use AI doesn't mean AI is good
I really need to write a blog post on this because I keep seeing this mindset 😅 in short: my opinion of it is: AI is great if you use it to augment, i.e rubber ducky, use it as a quick reference for documentation, some debugging help etc. AI is terrible if you use it to vibe code or put it in the driver's seat. My 2c
In the best case you consult the AI service to do the boring and time-consuming tasks for you so you can approach the creative and relevant ones. When it comes to development you best be able to build the outlines yourself and then have the LLM improve and test it. Otherwise you are not coding, you are just rewriting prompts 🫠
@Gabriele I respond to you here since your other post was locked.
But the difference between height and min-height is that if you set a height, the height is fixed, as you add more content, the content will eventually overflow if it exceeds the height that you have set, because the height is fixed.
If you set a min-height, then you set a minimum height so that means it cannot shrink below the height that you set, but as you add more content, the height of the container will expand to make room for the container so this prevents your content from overflowing, so it can grow larger than the height you set, but it cannot shrink below the height you set
thanks for the help
You have a lot of
position: relative and absolute which is throwing things off. They're not needed. And as Tok124 said, you have some set dimensions—that's really bad practice (except for images). You're trying to fit content into a smaller space than it wants and that's where the issues are stemming from. This is the web, you don't have any limited page space: let the content dictate it's container size instead.Updated the pen to include the search functionality to hopefully show how it can work. It's one complete "component" wrapped in one
div.
https://codepen.io/13eck/pen/ogbPoadYou can search for any Chronicles of Narnia or Lord of the Rings book. That's my data set :p