I am currently working on a website with multiple pages that have unique structures. All the HTML elements are wrapped in a container defined as:
<div class="wrapper">
On one page, I have used the following CSS for the wrapper:
.wrapper{
display: grid;
grid-template-columns: 5% 45% 45% 5%;
grid-template-rows: 5% auto 5%;
width: 100;
margin: auto auto;
}
However, there is another page with content wrapped in the same container but requiring a different grid layout. My solution was to create separate wrapper classes for each page:
<div class="wrapperhome">
<div class="wrappercontact">
and adjust the CSS accordingly.
As someone with limited experience using wrappers, I am unsure if this approach is considered bad practice or if there are better alternatives to solve this problem.