Plain CSS solution, help needed

Community feedback

• 

  Ziyad ghobashi•180

  @ziy-egPosted over 2 years ago

  in my perspective: 2 options:

  • the grid display option with 3 columns for the cards.
  • the flex display option with the default row direction. the second and the third card would have to be on the same <div> with (flex-direction: column;) for the flex.

  OR you could use (align-self: center;) for the first and last cards.

  Both 2 methods are the easiest for ME, and I prefer the Grid option as well.

  Great job thou.. I love your code and I like the use of (.center) on your HTML.

  Marked as helpful

  1

  ---

  

  erwin•60

  @lanszeszPosted over 2 years ago

  @ziy-eg Wow your second solution with the flex-direction: column; just blew my mind!

  0

  

  erwin•60

  @lanszeszPosted over 2 years ago

  @ziy-eg Finally I watched a grid video and fixed the cards !

  1

  

  Ziyad ghobashi•180

  @ziy-egPosted over 2 years ago

  @lanszesz that was awesome and easier, you see...

  0
• 

  Riccardo•240

  @riccardofanoPosted over 2 years ago

  Hello Erwin, you can position the cards using CSS grid!

  On the desktop version you'll see there are 3 columns of equal size. Then there are what might appear to be 3 rows but in reality there are only 2, the cards on the side start at the first row but span 2, they are then centered. On the mobile version there's only one column so you can change the grid accordingly.

  I hope this was helpful, take a look at my solution if you need any pointers.

  Marked as helpful

  1

  ---

  

  erwin•60

  @lanszeszPosted over 2 years ago

  @riccardofano Hi! Thank you for your comment. I guess it's time to learn CSS grid because I literally know nothing about it. 😁 I will look at your solution

  0
• 

  David•30

  @davidfcopozoPosted over 2 years ago

  Here is a pen I made with the layout you want to achieve and also a video with an excellent explanation of the Grid.

  https://codepen.io/davidfcopozo/pen/LYdmRJR https://www.youtube.com/watch?v=duH4DLq5yoo&ab_channel=KevinPowell

  ...................................................................................................................................................................................................................................................................

  1
• 

  Suraj Raju Hadage•670

  @SurajHadagePosted over 2 years ago

  You deed good and you can do it without even using flex.

  • All you have to do is use transform: translateY(50%) to first & second card, When screen size is above 1024px.
  • I have made this design without Flex & Grid. Check my solution.

  1