Kevin Powell - Community•2y ago

CSS Grid without Floats #cssgrid

Hi everyone, I’m looking to create a css grid with 6 cards altogether, 3 columns and two rows without using float, can someone help me with this? #html-and-css #cards #cssgrid

10 Replies

Kevin Powell•2y ago

<div class="card-grid">
  <div class="card"> ... </div>
  <div class="card"> ... </div>
  <div class="card"> ... </div>
  <div class="card"> ... </div>
  <div class="card"> ... </div>
  <div class="card"> ... </div>
</div>

<div class="card-grid">
  <div class="card"> ... </div>
  <div class="card"> ... </div>
  <div class="card"> ... </div>
  <div class="card"> ... </div>
  <div class="card"> ... </div>
  <div class="card"> ... </div>
</div>

.card-grid {
  display: grid;
  
  /* create 3 columns */
  grid-template-columns: repeat(3, 1fr);
  
  /* add space between things, if needed */
  gap: 1rem;
}

.card-grid {
  display: grid;
  
  /* create 3 columns */
  grid-template-columns: repeat(3, 1fr);
  
  /* add space between things, if needed */
  gap: 1rem;
}

No need to define the rows, they'll just be added automatically, since you have 6 total cards.

rosg154OP•2y ago

No problem great thanks Kevin! Would you recommend px or rem for specifying font size?

Kevin Powell•2y ago

rem 😄

rosg154OP•2y ago

What would px be used for?

Myndi•2y ago

Basically if you know what you're doing, you could play around with px. Generally stick to rem on em in doubt, and throw in pixels for something like an image or svg (if you required specific fixed sizes).

rosg154OP•2y ago

Thanks, have you any advice for media queries? Mobile first for css grid?

Myndi•2y ago

It's a personal choice. It's generally recommended to do mobile first because it tends to be a struggle to adapt it later on, specially with complicated layouts.

rosg154OP•2y ago

Thanks I’ll adopt few methods and check for sizing What’s recommended sizing? Also what can I use instead of float in css to position text

Kevin Powell•2y ago

more context there would be useful... either grid or flexbox in general though, floats aren't for layout, they're just an old hack from before we had layout tools

rosg154OP•2y ago

Hi, I’m trying to create a card effect that went hovered on the background changes colour but I want a transition effect Can someone help with this please?

Gaming

Programming

CSS Grid without Floats #cssgrid