I'm on day one of a project to make a very large Web site mobile friendly. Site has been online for over 20 years (hymntime.com/tch - check out the Portuguese section!). I'm trying to understand whether CSS grid would work for me, and have done some initial reading.
One issue I haven't seen covered is: What happens if one or more grid columns have no corresponding HTML markup?
For example, my HTML pattern has a div called "preface." It contains text in the middle, with 0, 1 or 2 images on the left & right. In pseudo-HTML, it looks like this:
div // Start of preface. This would be my grid container.
div // Optional left side image (if none, this div isn't present).
div // Text. Always present.
div // Optional right side image (if none, this div isn't present).
div // End of preface
To avoid changing markup in over 10,000 Web pages, I'd like to define a single grid for my preface div, with 1 row & 3 columns.
But what does the browser do if the CSS defines 3 columns, but the HTML markup only has 2 columns? Or 1 column? Does this cause an error? Or is the missing column ignored & doesn't take up any screen real estate (as if it was display:none)?
Thanks for reaching out. Sorry for the delay in answering you.
So, I went through your question and for the scenario you gave me, the markup for the column that is not rendered will not take any space, which makes total sense. So if you define that the grid should start from left to right and let's say the first column is not rendered, then the second column will take the space that was supposed to be allocated to the first column.
Check this out codepen.io/anon/pen/oKvKYV
You can try to remove the first and/or third inner div in there and see what happens :)
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
I'm on day one of a project to make a very large Web site mobile friendly. Site has been online for over 20 years (hymntime.com/tch - check out the Portuguese section!). I'm trying to understand whether CSS grid would work for me, and have done some initial reading.
One issue I haven't seen covered is: What happens if one or more grid columns have no corresponding HTML markup?
For example, my HTML pattern has a div called "preface." It contains text in the middle, with 0, 1 or 2 images on the left & right. In pseudo-HTML, it looks like this:
div // Start of preface. This would be my grid container.
div // Optional left side image (if none, this div isn't present).
div // Text. Always present.
div // Optional right side image (if none, this div isn't present).
div // End of preface
To avoid changing markup in over 10,000 Web pages, I'd like to define a single grid for my preface div, with 1 row & 3 columns.
But what does the browser do if the CSS defines 3 columns, but the HTML markup only has 2 columns? Or 1 column? Does this cause an error? Or is the missing column ignored & doesn't take up any screen real estate (as if it was display:none)?
Hello Dick,
Thanks for reaching out. Sorry for the delay in answering you.
So, I went through your question and for the scenario you gave me, the markup for the column that is not rendered will not take any space, which makes total sense. So if you define that the grid should start from left to right and let's say the first column is not rendered, then the second column will take the space that was supposed to be allocated to the first column.
Check this out codepen.io/anon/pen/oKvKYV
You can try to remove the first and/or third inner div in there and see what happens :)