.data-grid-container {
display: grid;
/* Define 3 columns: 20% for first, 40% for the next two */
grid-template-columns: 0.2fr 0.4fr 0.4fr; /* Using fr units for flexibility */
gap: 10px; /* Space between grid items/cells */
/* --- KEY CHANGE FOR WIDTH --- */
width: 100%; /* Take up 100% of the parent's available width */
max-width: 100%; /* Ensure it never exceeds the parent's width */
/* If you want to cap it at a reasonable max width on very large screens
(e.g., desktops) to improve readability, you could add:
max-width: 960px; (or 1200px, etc.)
And combine with: margin: 0 auto; to center it.
For now, to strictly consume device width, we leave it at 100%. */
border: 1px solid black; /* Mimic table border */
padding: 10px; /* Optional padding inside the container */
box-sizing: border-box; /* Include padding/border in total width */
}
.grid-header-cell,
.grid-row-header,
.grid-data-cell {
padding: 8px; /* Padding inside each cell */
border: 1px solid #ccc; /* Cell borders */
word-wrap: break-word; /* Essential for text wrapping */
word-break: break-word; /* Essential for text wrapping */
background-color: #f9f9f9; /* Light background for cells */
box-sizing: border-box; /* Ensure padding/border don't add to cell width */
}
.grid-header-cell {
font-weight: bold;
text-align: center; /* Center header text */
background-color: #e0e0e0; /* Different background for headers */
}
.grid-row-header {
font-weight: bold;
background-color: #e0e0e0;
}
/* --- Responsive adjustments for Mobile --- */
@media (max-width: 768px) { /* Changed breakpoint to a common mobile/tablet cutoff */
.data-grid-container {
/* Stack items vertically on small screens */
grid-template-columns: 1fr; /* One column, each item takes full width */
}
/* Make row headers visible before their data on mobile */
.grid-row-header {
margin-top: 15px; /* Add some space above each section */
background-color: #d0d0d0; /* Slightly darker background to separate sections */
}
}