auto do for me in CSS grid?
grid-template columns: auto
say grid-template-rows: auto auto auto
anywhere else i cant think of where i can use
please pass on some simple samples
auto code with comments so i can learn
January 30, 2023, 12:22pm
I would prefer if you constructed a code pen with those properties above and test for yourself what happens.
Add more children to the grid with some dummy content and see the result. Then remove the css rules for the column and rows and see what the difference is.
In that way you will learn more thoroughly than me just saying no that’s wrong?
It’s only by repeated testing and experimenting that you can get a feel for what’s happening.
You really only need to define the columns and rows when you have a set layout to achieve (like a header, footer and 3 columns). If you want auto columns and rows you don’t really need to define them.
Note your minmax rule is incorrect and you can easily look up the correct format.
yes, i can look up my own solutions
progress! i have been worknig on
more my speed!
ok, i have been playing with my code
grid-template-columns:auto 200px 200px;
why is the 1st column so wide on the
auto here will provide just enough space to fill the width
i dont understand when i add
grid-template-columns: 1fr 2fr;
grid-template-rows: auto 1fr;
what is auto doing for me?
i coded the
auto grid-template-row, but saw no diference
February 1, 2023, 9:12am
Isn’t that obvious?:).
The auto column will be all the remaining width after the other 2 columns of 200px have been placed. If the page is 2000px wide then the auto column will be 1600px (barring any gaps).
There is no difference because there is no need for auto here or the 1fr. They would only work if there was a fixed height to the grid.
February 1, 2023, 9:42am
In that second example you have not specified auto for a column
Note that you still have made the mistake of using height (even in demos).
This is what I see on my phone.
Had you used min-height instead the box would have grown to accommodate the text.
AH HA! got it!
here i have learned something new
i need to play with this one to fully get it
Auto in CSS grid - #6 by PaulOB
February 1, 2023, 6:24pm
Yes the auto rules for the rows aren’t really needed but would suggest that you only have 4 items. 2 rows of 2.
If you have an unknown number of rows then you don’t need to specify the rows.
You have to think in terms of whether this grid is a layout or whether it is a grid of unknown size.
When you use grid for the whole page layout you probably just have a header, sidebar, main section and footer. You are not then going to repeat all those by adding another footer or header etc. You have say 4 or 5 areas that are explicitly defined. All your content goes in those defined areas.
thanks again! and thanks for your patience!