diff --git a/src/components/LinkItems/Section.vue b/src/components/LinkItems/Section.vue index a9034732..7ec2831c 100644 --- a/src/components/LinkItems/Section.vue +++ b/src/components/LinkItems/Section.vue @@ -106,9 +106,9 @@ export default { gridStyle() { let styles = ''; styles += this.displayData.itemCountX - ? `grid-template-columns: repeat(${this.displayData.itemCountX}, 1fr);` : ''; + ? `grid-template-columns: repeat(${this.displayData.itemCountX}, minmax(0, 1fr));` : ''; styles += this.displayData.itemCountY - ? `grid-template-rows: repeat(${this.displayData.itemCountY}, 1fr);` : ''; + ? `grid-template-rows: repeat(${this.displayData.itemCountY}, minmax(0, 1fr));` : ''; return styles; }, }, diff --git a/src/components/MinimalView/MinimalSection.vue b/src/components/MinimalView/MinimalSection.vue index b20112ec..d4d3aac7 100644 --- a/src/components/MinimalView/MinimalSection.vue +++ b/src/components/MinimalView/MinimalSection.vue @@ -97,12 +97,13 @@ export default { border-radius: 0 0 var(--curve-factor) var(--curve-factor); .section-items { display: grid; - @include phone { grid-template-columns: repeat(1, 1fr); } - @include tablet { grid-template-columns: repeat(2, 1fr); } - @include laptop { grid-template-columns: repeat(3, 1fr); } - @include monitor { grid-template-columns: repeat(4, 1fr); } - @include big-screen { grid-template-columns: repeat(5, 1fr); } - @include big-screen-up { grid-template-columns: repeat(6, 1fr); } + @include phone { --minimal-col-count: 1; } + @include tablet { --minimal-col-count: 2; } + @include laptop { --minimal-col-count: 3; } + @include monitor { --minimal-col-count: 4; } + @include big-screen { --minimal-col-count: 5; } + @include big-screen-up { --minimal-col-count: 6; } + grid-template-columns: repeat(var(--minimal-col-count, 1), minmax(0, 1fr)); } &.selected { border: 1px solid var(--minimal-view-group-color);