Single-price Grid Component Solution

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello PHÚC, congratulations for your new solution!

  There's a quick way to build this component using grid. You can use display: grid and grid-template-column: 1fr 1fr to make the container have two columns. To make the first column take two spaces you set it inside the first card grid-column: span 2 this makes the column gets two spaces instead of one and the two columns under take only one space.

  For the media query all you need to change is to set the first card column as default and make the general grid as a single column with grid-template-column: 1fr

  👋 I hope this helps you and happy coding!

  1

  ---

  

  Phúc (Scott) Nguyễn•430

  @NationsAnarchyPosted about 2 years ago

  @correlucas Sorry Lucas, that first sentence was a bit misleading so I deleted that one already. I used the grid system for this challenge - I meant that I have already tackled a more difficult challenge utilizing a grid system previously.

  Anyway, I hope your comment will give people some clues on how to complete it!

  0

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @NationsAnarchy Ah okay! by what you wrote I was thinking you're having troubles to make it up. Sorry! Something you can improve is the divs for each card, using a semantic tag to wrap it, as article.

  Sorry again bro, I didnt understand good what you've written before, this why I wrote about the grid =(

  0

  

  Phúc (Scott) Nguyễn•430

  @NationsAnarchyPosted about 2 years ago

  @correlucas All good :D English is both our second language anyway!

  And yes, I still can't break my habit of using div everywhere lol - thanks again!

  1