Is it feasible to use CSS Grid for structuring a webpage in a way that allows semantic grouping of tags like <section> without disrupting the grid layout, especially when the grouped items are supposed to be direct children of the grid container?
I aim to create this semantic grouping to ensure compliance with WCAG guidelines by organizing content into meaningful units (https://www.w3.org/WAI/GL/wiki/Using_HTML5_section_element). However, I am struggling to figure out how to group the header within a <section> while preserving my layout, which includes a grid cell dedicated to the logo.
HTML snippet
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<!-- Starting Wrapper -->
<!-- I attempted replacing a <main> tag instead of a div here, but it resulted in
displaying only the logo at the top left corner of the page with nothing else -->
<div id="wrapper">
<!-- Header Section: intended semantic grouping #1 -->
<div id="logo" ><img src="../assets/images/some_image.png"/></div>
<div id="header"><h1>header h1</h1></div>
<!-- Content Section: desired semantic grouping #2 -->
<div id="left_aside">
<nav>
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
<li><a href="#">link 5</a></li>
</ul>
</nav>
</div>
<div id="right_content">test right content</div>
<!-- Footer Section: planned semantic grouping #3 -->
<footer>test footer</footer>
</div>
<!-- Ending Wrapper -->
</body>
CSS styling
/* entire */
body {
margin : 0;
height : 100vh;
overflow: hidden;
}
#wrapper {
height : 100vh;
width : 100vw;
display : grid;
grid-template-columns: 1fr 8fr;
grid-template-rows : 2fr 17fr 1fr;
grid-gap : 2px 2px;
}
/* header */
#logo {
grid-column : 1/2;
grid-row : 1/2;
display : flex;
justify-content: center;
align-items : center;
padding : 1em;
}
img {
max-width : 150px;
max-height : 90px;
}
#header {
grid-column : 2/4;
grid-row : 1/2;
display : flex;
justify-content: center;
align-items : center;
}
h1 {
text-align : center;
}
/* content */
#left_aside {
background : yellow;
grid-column: 1/2;
grid-row : 2/3;
}
#right_content {
background : black;
color : white;
grid-column: 2/4;
grid-row : 2/3;
}
/* footer */
footer {
background : orange;
grid-column: 1/4;
grid-row : 3/4;
}
The advice against favoring grid over semantic grouping is valid, as removing semantic elements to make the layout work can lead to issues. It's crucial to maintain a well-structured document to avoid such problems.
Resources and examples have not provided a clear solution to my current dilemma.