Kevin Powell - Community•10mo ago

If anyone can help and look at my Html & CSS

I'm trying this challenge and just wanted some help on my code and what I can improve on and avoid. 1 question I had is whether or not I'm supposed to make a container when using grid or just put a width on the grid itself. I found when using a container/wrapper over my grid some of the columns and rows overflow when the browser shrinks because as the browser shrinks the container gets smaller but my columns and rows might have a fixed unit when using minmax() so they overflow. Any advice on how to fix this?

4 Replies

JJOP•10mo ago

https://codepen.io/vjiluhon-the-solid/pen/PogqEbr

joshua

CodePen

PogqEbr

...

Tok124 (CSS Nerd)•10mo ago

i would set a max-width on grid-component and then i would do grid-template-columns:1fr 1fr; You don't really need the repeat function if it's only 2 columns. 1fr 1fr is shorter than repeat(2, 1fr) so i would write it without repeat function.

JJOP•10mo ago

@tok124 (CSS Nerd) Thank you i appreciate the advice. Just one question. Is using place content: center, a good way to center the grid or is there a more efficient way?

Tok124 (CSS Nerd)•10mo ago

with grid you can use

.grid-container {
  display:grid;
  place-items:center;
  min-height:100vh;
  min-height:100svh;
}

.grid-container {
  display:grid;
  place-items:center;
  min-height:100vh;
  min-height:100svh;
}

.grid-container {
  display:grid;
  place-content:center;
  min-height:100vh;
  min-height:100svh;
}

.grid-container {
  display:grid;
  place-content:center;
  min-height:100vh;
  min-height:100svh;
}

.grid-container {
  display:grid;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  min-height:100svh;
}

.grid-container {
  display:grid;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  min-height:100svh;
}

All these ways works to center both horizontally and vertically. All these methods are efficent ways to center. But in some cases you want to remove the element from the document flow because you dont want other elements to leave space for this element in the center. So in this case you need to use the position:absolute; method

.element {
  position:absolute;
  top:50%;
  left:50%;
  translate:-50% -50%;
}

.element {
  position:absolute;
  top:50%;
  left:50%;
  translate:-50% -50%;
}

So this is also a good way to center. and it doesnt require grid, and it doesnt require 100 viewport height. Or yeah, there is one more way actually

.grid-container {
  display:grid;
  min-height:100vh;
  min-height:100svh;
}
.grid-item {
  place-self:center;
}

.grid-container {
  display:grid;
  min-height:100vh;
  min-height:100svh;
}
.grid-item {
  place-self:center;
}

This also works. and it will only center this 1 item

Gaming

Programming

If anyone can help and look at my Html & CSS