Kevin Powell - Community•2y ago

having trouble with row gaps

I'll share code in a reply but im having trouble with row gaps not working. Trying to space these rows just a little bit so names and pics aren't so close together. I know im doing something wrong. Please let me know

30 Replies

MD•2y ago

here's my css

* {
    box-sizing: border-box;
}

body {
    height: 100vh;
    width: 100vw;
    background-color: black;
    
}

.layout {
   
    width: 50%;
    margin: 0 auto;
  
}

.row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(1, 1fr);
    column-gap: 1px;
    grid-row-gap: 20px;
    justify-items: center;
    text-align: center;
}

.pic a img {
    object-fit: cover;
    display: inline-block;
    border: 2px solid #e93f33;
}

img {
    width: 144px;
    height: 144px;
}

.fightname > b a {
    text-decoration: none;
    color: #ffd700;
    text-align: center;
    padding: 50px;
    transition: color .3s;
}

.fightname b a:hover {
    text-decoration: underline;
    color: #ffe665;
    transition: color .3s ease;
    cursor: pointer;
}

.fightname {
    margin-top: 0.5em;
}

b {
    font-weight: bold;
}

* {
    box-sizing: border-box;
}

body {
    height: 100vh;
    width: 100vw;
    background-color: black;
    
}

.layout {
   
    width: 50%;
    margin: 0 auto;
  
}

.row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(1, 1fr);
    column-gap: 1px;
    grid-row-gap: 20px;
    justify-items: center;
    text-align: center;
}

.pic a img {
    object-fit: cover;
    display: inline-block;
    border: 2px solid #e93f33;
}

img {
    width: 144px;
    height: 144px;
}

.fightname > b a {
    text-decoration: none;
    color: #ffd700;
    text-align: center;
    padding: 50px;
    transition: color .3s;
}

.fightname b a:hover {
    text-decoration: underline;
    color: #ffe665;
    transition: color .3s ease;
    cursor: pointer;
}

.fightname {
    margin-top: 0.5em;
}

b {
    font-weight: bold;
}

html

MD•2y ago

html

html

message.txt

MD•2y ago

trying to get close to this

MD•2y ago

Coder_Carl•2y ago

Unsure why you had 3 separate row ? I have treated this as part of the problem, but let me know if this was intended for a reason? - this is grid so we have full control of the children from the parent. - this means we can remove those surrounding div tags. - this also means that putting gaps between the rows is a simple matter have updated your layout and row classes slightly. and removed any .row div that was wrapping the items

.layout {
  width: 50%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  place-items: center;
  gap: 1em 0;
}

/* .row { */
/*   display: grid;
  grid-template-rows: repeat(1, 1fr);
  column-gap: 1px;
  grid-row-gap: 20px; */
/*   justify-items: center;
  text-align: center; */
/* } */

.layout {
  width: 50%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  place-items: center;
  gap: 1em 0;
}

/* .row { */
/*   display: grid;
  grid-template-rows: repeat(1, 1fr);
  column-gap: 1px;
  grid-row-gap: 20px; */
/*   justify-items: center;
  text-align: center; */
/* } */

the issue I see with this is that the sizing of your element is not responsive. So you would need to make this responsive somehow

MD•2y ago

I was just following the source code of the goal image I shared. The site i got it from used separate divs

Mannix•2y ago

the grid-row-gap doesn't do anything in your css if you want to put the space between rows you need to set .layout to a grid then you can use grid-row-gap or just put margin-block-end on .row to space them out

MD•2y ago

Interesting why does it need to be layout?

Mannix•2y ago

why? because of how you structured your html grid-row-gap affect the children of the grid box in your case it would be .item

MD•2y ago

So the best thing to do is make .layout the grid?

Mannix•2y ago

yes and remove the rowso all the item are a child of layout

MD•2y ago

Hmm ok Would that make it responsive

Mannix•2y ago

depends on how you set your grid-template-columns

MD•2y ago

I'm sticking with 4 columns Unless screen gets smaller then maybe 1

Mannix•2y ago

use media query to change that 🙂

MD•2y ago

So should I drop the rows and just make them all items? I'm trying to keep names underneath pictures

Mannix•2y ago

I would switch from all those divs to figure + figcaption https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption

: The Figure Caption element - HTML: HyperText Markup Language | MDN

The HTML element represents a caption or legend describing the rest of the contents of its parent element.

Mannix•2y ago

treat figure as a div with the class item

MD•2y ago

Hmm ok been trying things as suggested seems like im not getting it perfect

Myndi•2y ago

What are you trying to do right now?

MD•2y ago

MD•2y ago

That's what I was able to make so far I just need to do color transition on the names to give them a kind of glow when hovered over Then work on getting it responsive for smaller devices (single column stack)

Myndi•2y ago

Just select whatever text or paragraph, like:

.dummy-text:hover {
  /* do something here */
}

.dummy-text:hover {
  /* do something here */
}

MD•2y ago

Aiming for

transition: color .3s

transition: color .3s

Myndi•2y ago

Yeah, simply go for that example.

.dummy-text {
  color: red;
  transition: color 300ms linear; 
}

.dummy-text:hover {
  color: white;
}

.dummy-text {
  color: red;
  transition: color 300ms linear; 
}

.dummy-text:hover {
  color: white;
}

MD•2y ago

seems weird getting landscape and portrait layouts right I used this here

@media only screen and (max-width: 82.375rem) {
    /* for Mobile */
    .layout {
        width: 100%;
        grid-template-columns: repeat(1, 1fr);
        row-gap: 10rem;
    }

    .fightname b a {
        font-family: "IBM Plex Mono", sans-serif;
        font-size: 4ch;
    }

    img {
        width: 200px;
        height: 200px;
        text-align: center;
    }

    .fightname {
        text-align: center;
    }
}

@media only screen and (max-width: 82.375rem) {
    /* for Mobile */
    .layout {
        width: 100%;
        grid-template-columns: repeat(1, 1fr);
        row-gap: 10rem;
    }

    .fightname b a {
        font-family: "IBM Plex Mono", sans-serif;
        font-size: 4ch;
    }

    img {
        width: 200px;
        height: 200px;
        text-align: center;
    }

    .fightname {
        text-align: center;
    }
}

just seems like the landscape vs portrait views look messy when transitioning

MD•2y ago

MD•2y ago

MD•2y ago

shouldnt be doing that

Myndi•2y ago

Could you maybe post it in a codepen? Would be much easier having the whole thing.

Gaming

Programming

having trouble with row gaps