Working on a site that uses W3.CSS, I came across this issue where adding a w3-panel
class to the grid container messes up the layout of the grid items.
This was a bit surprising, as the w3-panel
docs only mention that it adds margins and padding:
The w3-panel class adds a 16px top and bottom margin and a 16px left and right padding to any HTML element.
Here’s a minimal example of a grid without W3.CSS:
#my-grid {
/* grid settings */
display: grid;
grid-template-columns: repeat(3, 50px);
/* cosmetics */
column-gap: 10px;
background-color: lightsalmon;
}
#my-grid div {
/* cosmetics */
background-color: mediumpurple;
}
<div id="my-grid">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
And here’s what happens if we add the w3-panel
class from W3.CSS:
#my-grid {
/* grid settings */
display: grid;
grid-template-columns: repeat(3, 50px);
/* cosmetics */
column-gap: 10px;
background-color: lightsalmon;
}
#my-grid div {
/* cosmetics */
background-color: mediumpurple;
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div id="my-grid" class="w3-panel">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
What is going wrong here? How can we fix this?
This discussion may be related.
2
Answers
The W3.CSS source shows that the
w3-panel
class does a bit more than just add margins and padding.These are all the CSS rules related to
w3-panel
, extracted from the W3.CSS source:The
w3-panel:before
turns out to be the culprit here, as it creates a pseudo element that is treated as a grid item, as described e.g. here. This is confirmed in the snippet below.One way to work around this is issue (other than not using w3.css) is not to apply the
w3-panel
class directly to the grid container itself, but, instead, wrap the grid container in another element. This is probably more robust in general. See snippet below:I don´t see why mix w3.css with hand coded grid having w3.css your own grid internal support.
One approach to achieve something like your first example could be, for example :
For more information take a look at w3.css Fluid Grid documentation
Saludos,