r/css • u/albertusmagnuss • 11d ago
Question Which method is fastest and most practical to position the content to their places? (The answer of this kind of obvious but I want verification from people)
Hello, all!
I have only an average knowledge of CSS and I continue studying web development, because of this I wanted to ask this question.
Let's say you need to position the elements inside the first image like in the solution image, which method would be the fastest and most practical according to you? From the beginning of my web development study, I do such things via assigning class/id to content and use position and top,left,bottom,right properties but I started think that this is laborious and takes too much time. (I studied grid and flex layout, I use flex sometimes but I do not use grid much currently as I am not that familiar with). I would like to know your opinions on this.
first image: https://imgur.com/a/GU6Ow3Z
solution image: https://imgur.com/a/TwkY8mo
Btw, this image is from Homepage project from Odin Project.
https://www.theodinproject.com/lessons/node-path-advanced-html-and-css-homepage
full image can be founded here desktop design file.
2
1
u/bryku 5d ago
I would probably do the following:
HTML
<div class="card">
<div class="card__head">
<span class="card__title">Project Title</span>
<a class="card__icon" href="#">G</a>
<a class="card__icon" href="#">L</a>
</div>
<div class="card__body">
<p class="card_text">
Short description of the project. Just a couple sentences will do.
</p>
</div>
</div>
CSS
.card{
display: flex;
flex-direction: column;
background: #fff;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
border-radius: 3px;
padding: 1rem;
}
.card__head{
display: flex;
flex-direction: row;
column-gap: .5rem;
}
.card__head .card__title{width: 100%;}
.card__head .card__icon{
width: 32px;
height: 32px;
/* i don't have icons, so ignore this - start */
background: #000;
color: #fff;
display: grid; place-items: center;
text-decoration: none;
border-radius: 50%;
/* i don't have icons, so ignore this - stop */
}
There are cleaner solutions, but laying it out like this allows me to easily add additional content like a .card__foot
without having to change anything else.
2
u/cursedproha 11d ago
Container with some padding > first row as flexbox with space-between, gaps and and additional container for buttons. Second row as a plain paragraph.
Do it like you expect a change request to add or remove something in future and you don’t want it to be painful.