It seems like there should be a simple solution to this issue, but I'm having trouble finding it. I'd like to replicate the layout shown in the image linked below:
https://i.sstatic.net/5GsWL.png
The challenge is to center the item and quantity rows below the details title, while keeping the text inside them left-aligned. Here's my current attempt at achieving this:
.grid-container {
background: gray;
display: inline-grid;
justify-items: center;
align-content: center;
grid-template-columns: 1fr 1fr;
padding: 10px;
}
.details {
font-weight: bold;
grid-column: span 2;
}
.info {
text-align: left;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css" />
<title>Document</title>
</head>
<body>
<div class="grid-container">
<div class="details">Details</div>
<div class="info">Item</div>
<div class="info">Beans</div>
<div class="info">Quantity</div>
<div class="info">41</div>
</div>
</body>
</html>While the content is centered correctly, the text remains unjustified. Is there a way to achieve this using CSS Grid?
Thanks for any assistance provided.