I would like to create a collage with predefined fields and a fixed aspect ratio. The border and the grid gap should adapt dynamically to the size of the collage (should not always correspond to the viewport width). Percentage gap values are known to cause problems:
row-gap
uses the height of the grid and then differs fromcolumn-gap
- a large gap leads to an overflow of the grid
Do you have any solutions?
Here is a CodePen
And here is the code:
<code><div id="collage" class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</code>
<code><div id="collage" class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</code>
<div id="collage" class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<code>:root {
--border: 5%;
--gap: 5%;
}
* {
box-sizing: border-box;
}
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(12, 1fr);
gap: var(--gap);
padding: var(--border);
background: red;
width: 100%;
aspect-ratio: 2;
}
.grid div {
background: blue;
&:nth-child(1) { grid-column: 1/6; grid-row: 1/4; }
&:nth-child(2) { grid-column: 6/10; grid-row: 1/4; }
&:nth-child(3) { grid-column: 10/13; grid-row: 1/6; }
&:nth-child(4) { grid-column: 1/4; grid-row: 4/8; }
&:nth-child(5) { grid-column: 4/10; grid-row: 4/10; }
&:nth-child(6) { grid-column: 10/13; grid-row: 6/10; }
&:nth-child(7) { grid-column: 1/4; grid-row: 8/13; }
&:nth-child(8) { grid-column: 4/9; grid-row: 10/13; }
&:nth-child(9) { grid-column: 9/13; grid-row: 10/13; }
}
</code>
<code>:root {
--border: 5%;
--gap: 5%;
}
* {
box-sizing: border-box;
}
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(12, 1fr);
gap: var(--gap);
padding: var(--border);
background: red;
width: 100%;
aspect-ratio: 2;
}
.grid div {
background: blue;
&:nth-child(1) { grid-column: 1/6; grid-row: 1/4; }
&:nth-child(2) { grid-column: 6/10; grid-row: 1/4; }
&:nth-child(3) { grid-column: 10/13; grid-row: 1/6; }
&:nth-child(4) { grid-column: 1/4; grid-row: 4/8; }
&:nth-child(5) { grid-column: 4/10; grid-row: 4/10; }
&:nth-child(6) { grid-column: 10/13; grid-row: 6/10; }
&:nth-child(7) { grid-column: 1/4; grid-row: 8/13; }
&:nth-child(8) { grid-column: 4/9; grid-row: 10/13; }
&:nth-child(9) { grid-column: 9/13; grid-row: 10/13; }
}
</code>
:root {
--border: 5%;
--gap: 5%;
}
* {
box-sizing: border-box;
}
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(12, 1fr);
gap: var(--gap);
padding: var(--border);
background: red;
width: 100%;
aspect-ratio: 2;
}
.grid div {
background: blue;
&:nth-child(1) { grid-column: 1/6; grid-row: 1/4; }
&:nth-child(2) { grid-column: 6/10; grid-row: 1/4; }
&:nth-child(3) { grid-column: 10/13; grid-row: 1/6; }
&:nth-child(4) { grid-column: 1/4; grid-row: 4/8; }
&:nth-child(5) { grid-column: 4/10; grid-row: 4/10; }
&:nth-child(6) { grid-column: 10/13; grid-row: 6/10; }
&:nth-child(7) { grid-column: 1/4; grid-row: 8/13; }
&:nth-child(8) { grid-column: 4/9; grid-row: 10/13; }
&:nth-child(9) { grid-column: 9/13; grid-row: 10/13; }
}