I have a fairly simple CSS Grid with 12 columns. I am using the row-start and row-end features of CSS Grid to place my items exactly where I want them. But I have run into an issue where the more items I add on my right side, the left side keeps expanding and growing.
For example, this is what it looks like if there are only 3 documents added:
But with 7 documents my left side has now expanded like crazy instead of staying at the top as it should:
Ideally, I would like my left side not to move or expand no matter how many items I add on the right side like this:
I know I can easily accomplish this using flexbox but I really want to do this using CSS Grid and row-start, row-end features.
Here is my code right now (https://play.tailwindcss.com/fy2kFCCb9T):
<div class="h-screen bg-gray-900 p-4 text-gray-300">
<!-- Grid -->
<div class="grid grid-cols-12 gap-4">
<!-- Right: Documents -->
<div class="row-start-1 col-start-7 col-span-6 row-span-3 space-y-4">
<div class="p-2 bg-gray-700 rounded">Document #1</div>
<div class="p-2 bg-gray-700 rounded">Document #2</div>
<div class="p-2 bg-gray-700 rounded">Document #3</div>
<div class="p-2 bg-gray-700 rounded">Document #4</div>
<div class="p-2 bg-gray-700 rounded">Document #5</div>
<div class="p-2 bg-gray-700 rounded">Document #6</div>
<div class="p-2 bg-gray-700 rounded">Document #7</div>
</div>
<!-- Left: Category -->
<div class="col-span-6 row-start-1">
Category
</div>
<!-- Left: Name -->
<div class="col-span-6 row-start-2">
Name
</div>
<!-- Left: Price -->
<div class="col-span-6 row-start-3">
Price
</div>
</div>
</div>
2
Answers
You could consider declaring explicit grid row tracks. This means you would be able to size the rows that the left items appear in, so that they are not as spread out due to the auto grid row sizing.
Before:
After:
Alternatively, you could wrap the left elements in a container, so that they aren’t in any grid rows at all. This means they would be laid out as block elements, thus stacking from the top:
If you don`t want to use flexbox you can simply group your left side items into a container, something like this:
Now your left side will be considered as a single element (well, the container at least) while following your grid CSS rules :
This is how it will look at the end :