Kevin Powell - Community•5d ago

Maintainability and Alignment

I have two concerns for an exercise I’m working on here: https://codepen.io/Mcoding-300/pen/MYWwqQe note: some borders are included to see spacing/placement* 1) Is there a way I could have more control of how close my paragraph element (product description) is to my h3 element? I would like if there wasn’t so much space between them and that I could adjust it to taste. I don’t think I could even move the h3 anywhere if I tried either. 2) Do you think there’s issue with maintainability in the way this project is coded? Do you believe this could have been written in a more maintainable way? By all means please share your thoughts. I’m trying to improve more everyday. (For maintainability, I’m aware you could technically nest .product-description inside .product-item but when I tried to, my page didn’t look the way I intended it to. I’m not sure how to make something like that work. If you know, please feel free to share and please keep question 1 in mind if you do).
Also it would be super helpful to me if you could be specific in the wording of your corrections or suggestions.

M-coding300

CodePen

collection1

...

15 Replies

clevermissfox•5d ago

1. you have the default margin still on the h3 , looks like you nuked the top marign on the <p> and in a flex container margins dont collapse. You could nuke the margins on the h3 and then use gap on the flex container to add in the spacing you'd like. you couild instead have some html like this:

<div class="grid-container">
  <div class="card">
    <img class="product-img" />
    <div class="product-details">
      <h3 class="product-title">Title</h3>
      <p>Product description</p>
    </div>
  </div>
<div class="card">
    <img class="product-img" />
    <div class="product-details">
      <h3 class="product-title">Title</h3>
      <p>Product description</p>
    </div>
  </div>
<div class="card">
    <img class="product-img" />
    <div class="product-details">
      <h3 class="product-title">Title</h3>
      <p>Product description</p>
    </div>
  </div>
<div class="card">
    <img class="product-img" />
    <div class="product-details">
      <h3 class="product-title">Title</h3>
      <p>Product description</p>
    </div>
  </div>
</div>

<div class="grid-container">
  <div class="card">
    <img class="product-img" />
    <div class="product-details">
      <h3 class="product-title">Title</h3>
      <p>Product description</p>
    </div>
  </div>
<div class="card">
    <img class="product-img" />
    <div class="product-details">
      <h3 class="product-title">Title</h3>
      <p>Product description</p>
    </div>
  </div>
<div class="card">
    <img class="product-img" />
    <div class="product-details">
      <h3 class="product-title">Title</h3>
      <p>Product description</p>
    </div>
  </div>
<div class="card">
    <img class="product-img" />
    <div class="product-details">
      <h3 class="product-title">Title</h3>
      <p>Product description</p>
    </div>
  </div>
</div>

then you COULD use subgrid to use your current grid setup and make sure all the containers and images are even across the row or just use

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
  

  & .card {
    display: grid;
    grid-template-rows: 1fr max-content;
    border: thin solid;
    
      & img { align-self: stretch; width: 100%; height: 100%; object-fit: cover; display: block;}
  }
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
  

  & .card {
    display: grid;
    grid-template-rows: 1fr max-content;
    border: thin solid;
    
      & img { align-self: stretch; width: 100%; height: 100%; object-fit: cover; display: block;}
  }
}

Tok124 (CSS Nerd)•5d ago

https://codepen.io/tok124/pen/NPWqmVq This is how i would do it

Tim

CodePen

Untitled

...

Tok124 (CSS Nerd)•5d ago

so you can use aspect-ratio on the images and they will all have the same size. but other than that, it is similar to clevermissfox code suggestion @clevermissfox Btw, you don't need the & sign, not even for standard CSS Nesting, Not even if you select a tag name, it was required when nesting first came to standard CSS to include the & symbol when selecting a tag name but now you don't even need that anymore. Also, when you use grid on parent, the child elements will have align-items:stretch; by default, so i don't think the align-self:stretch; does anything in this case.

clevermissfox•5d ago

Thx tok💫 I know you don't need the & but I find it easier to quickly glance at and register it's a nested selector, just personally the visual indicator helps me and it also counts towards the selector (whatever the & is a placeholder for) . And I do know align stretch is default in grid and flex 😆 but I've found with imgs in grid since they are replaced elements things can weird and so I've had to explicitly add it w some browsers on imgs. It's an insurance policy as is height 100% ✨️

Tok124 (CSS Nerd)•5d ago

Oh hmm... Yeah i usually don't test my code on every single browser so idk what browser you used when you had to use align-items/align-self to stretch. since it is already default it really shouldn't be required, must be a browser bug in this case... Or you had previously set align-items:center; or something perhaps without noticing so you had to set it back to align-items:stretch; and that would then have solved the issue it's kinda like setting width:auto; when the width is already auto by default :p

clevermissfox•5d ago

It was only necessary for the image , I'll try to find the demo to show ya because it was very confusing why the images wouldn't stretch when it is the default. I spent a ton of time debugging and since then have just kept implementing that line on images in grid. Very possible I made a mistake I wasn't seeing but I had even made a post in here about it bc it wasn't making sense ; I'll look for that post or the demo so I can screen record and link it if you're interested

Tok124 (CSS Nerd)•5d ago

Oh hmm... Yeah, that sounds very interesting. I would love to try to debug that myself to see why that would actually be necessary in your specific case.

clevermissfox•5d ago

i refactored OPs codepen , to get the images to stretch in their cells, i have to align-self: stretch or on the parent grid explicitly set align-items: stretch I'd love to know what im doing wrong as i have just defaulted to adding align-self: stretch to images that are grid items because of this behaviour https://codepen.io/Miss-Fox/pen/MYWwdEr?editors=1100

CleverMissFox-GAcct

CodePen

#discord - grid images

...

Tok124 (CSS Nerd)•5d ago

Oh hmm... Yeah seems like you are right, i always go with 100% height but i have not really thought about this before that images doesnt stretch in a grid container. that's really interesting, i learned something new today then 😅

clevermissfox•5d ago

Yeah height 100% gets the same job done - I’m haven’t gotten a really clear answer on “why” other than “images are replaced elements so they are just weird sometimes” 🤷🏻‍♀️

Tok124 (CSS Nerd)•5d ago

Yeah, i would also love to know why this is the case for images. i thought all elements would stretch in a flexbox/grid container

clevermissfox•5d ago

Also explicit adding align-items:stretch on the grid also allows them to stretch but it’s odd because as you say that is the default and shouldn’t have to be explicitly defined

Tok124 (CSS Nerd)•5d ago

Yeah exactly. that is a little confusing haha

clevermissfox•5d ago

Probably something to do with their intrinsic aspect ratio but definitely bizarre. Had a heck of a time with it in a demo once and now I just default to align-self: stretch .

Tok124 (CSS Nerd)•5d ago

Yeah, that sounds about right

Gaming

Programming

Maintainability and Alignment

Did you find this page helpful?