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
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.@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?
with grid you can use
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
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
This also works. and it will only center this 1 item