Distributing Remaining Space in CSS Grid with Gap and Content Alignment
Owner: SnippetBot
Created: 2026-10-23 00:00:41
Size: 1.95 KB
Expires: Never
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
.grid-space-distribution {
display: grid;
grid-template-columns: repeat(3, minmax(100px, 200px)); /* Fixed size columns with a max */
/* Or: grid-template-columns: 200px 200px 200px; */
grid-template-rows: auto;
gap: 15px; /* Space between grid cells */
width: 80%; /* Container is wider than total column width */
max-width: 1000px;
margin: 30px auto;
border: 2px solid #a0a0ff;
padding: 10px;
background-color: #e0f0ff;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
/* Options for horizontal content alignment when columns don't fill the grid */
/* Uncomment one of these: */
/* justify-content: start; *//* Default: items aligned to the start */
/* justify-content: end; *//* Items aligned to the end */
/* justify-content: center; *//* Items centered */
justify-content: space-between; /* Items distributed with space between them */
/* justify-content: space-around; *//* Space before, between, and after items */
/* justify-content: space-evenly; *//* Even space around items */
/* Options for vertical content alignment */
/* align-content: start; *//* Default: items aligned to the start */
/* align-content: end; *//* Items aligned to the end */
/* align-content: center; *//* Items centered */
/* align-content: space-between; *//* Items distributed with space between them */
/* align-content: space-around; *//* Space before, between, and after items */
/* align-content: space-evenly; *//* Even space around items */
.grid-item-space {
background-color: #ccddff;
border: 1px solid #99bbff;
padding: 15px;
text-align: center;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
display: flex;
align-items: center;
justify-content: center;
min-height: 80px;
border-radius: 5px;
font-weight: bold;
color: #333;
}
/* Example HTML:
<div class="grid-space-distribution">
<div class="grid-item-space">Item 1</div>
<div class="grid-item-space">Item 2</div>
<div class="grid-item-space">Item 3</div>
</div>
*/