Link to code:
https://codepen.io/dcode-software/pen/JjjpzLE

In this video tutorial I’ll be showing you how to create a card design (or layout) using plain HTML & CSS Grid.

This style of web design is perfect for displaying a bunch of summarised information at once.

Support me on Patreon:
https://www.patreon.com/dcode – with enough funding I plan to develop a website of some sort with a new developer experience!

Follow me on Twitter @dcodeyt!

If this video helped you out and you’d like to see more, make sure to leave a like and subscribe to dcode!

#html #css #dcode

source

32 Comments

  1. Thank you very much. Can you put navbar using list items (for instance, Home,Contact,Services & Product, and clicking menu items allow you to jump to content page accordingly.

  2. What do you do if the text in the cards has different amount of lines? So card 1 has 5 lines of text while card 2 has 7 lines of text and card 3 has 5 lines. There's a button at the bottom, which will be out of alignment with the other cards. How would I fix this?

  3. @dcode
    What do I do when the <p> elements card__content in one or more of the card(s) are longer than in the other(s) and therefore creates this white space underneath the card__info to fill out the space on the cards where the <p>s are shorter?

  4. Hi Great tutorial! I tried to reproduce and everything looks great but for some reason, the light gray box at the bottom doesn't fit to the width of the "card" as if it has some padding. Any idea what that could be? Thank you!

Leave A Reply

Please enter your comment!
Please enter your name here