lapikud/lapikud.github.io
2
0
Fork 1
mirror of https://github.com/Lapikud/lapikud.github.io.git synced 2026-08-09 02:19:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

helpdesk page

Browse Source
This commit is contained in:
Henri
2026-02-25 15:30:13 +02:00
parent 981f47d909
commit 89778446a6
11 changed files with 745 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/layout/Grid.svelte
View File

@@ -1,18 +1,23 @@
<!--
A responsive grid wrapper using CSS Grid. It exposes `min` and
`gap` props to control the responsive column minimum width and
spacing. Content is projected into the default slot.
A responsive grid wrapper using CSS Grid. It exposes `min`, `columns`,
and `gap` props to control the responsive column minimum width, fixed
column count, and spacing. Content is projected into the default slot.
-->
<script>
export let min = "220px"; // minimum column width
export let min = "220px"; // minimum column width (used when columns is not set)
export let columns = null; // fixed number of columns (e.g., "2", "3", "4")
export let gap = "var(--space-3)";
export let className = "";
$: gridTemplateColumns = columns
? `repeat(${columns}, 1fr)`
: '1fr';
</script>
<div
class="grid {className}"
style="--min: {min}; --gap: {gap}; grid-template-columns: 1fr; gap: var(--gap);"
style="--min: {min}; --gap: {gap}; --columns: {gridTemplateColumns}; grid-template-columns: var(--columns); gap: var(--gap);"
>
<slot />
</div>
@@ -20,6 +25,10 @@ spacing. Content is projected into the default slot.
<style>
@media (min-width: 768px) {
.grid {
grid-template-columns: var(--columns) !important;
}
.grid:not([style*="--columns: repeat"]) {
grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr)) !important;
}
}