Skip to content

feat(utilities): add css grid classes #22140

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

feat(utilities): add css grid classes #22140

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/docs/src/data/nav.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@
"elevation",
"flex",
"float",
"grid",
"opacity",
"overflow",
"position",
Expand Down
41 changes: 41 additions & 0 deletions packages/docs/src/examples/display-grid/auto-fill-cards.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<template>
<div class="d-grid grid-cols-auto-fill-250 ga-4 bg-surface-variant pa-4">
<v-sheet
v-for="(card, index) in cards"
:key="index"
class="pa-4"
>
<div class="text-subtitle-1 mb-2">{{ card.title }}</div>
<div class="text-body-2">{{ card.content }}</div>
</v-sheet>
</div>
</template>

<script setup>
const cards = [
{
title: 'Short Item',
content: 'Brief content here.',
},
{
title: 'Medium Length Item Title',
content: 'This item has a moderate amount of content to demonstrate how auto-fill handles different content lengths while maintaining consistent 250px minimum column widths.',
},
{
title: 'Very Long Item Title That Spans Multiple Lines',
content: 'This item contains a significant amount of content to show how auto-fill maintains the minimum 250px width while allowing items to grow taller to accommodate varying content lengths. The grid automatically creates as many columns as fit in the container width, and items expand vertically as needed.',
},
{
title: 'Another Item',
content: 'Different content length to show variety.',
},
{
title: 'Responsive Item',
content: 'Watch how the number of columns changes when you resize the browser window. Auto-fill creates as many 250px columns as can fit in the available space.',
},
{
title: 'Final Item',
content: 'Shows how auto-fill handles multiple items with varying heights.',
},
]
</script>
33 changes: 33 additions & 0 deletions packages/docs/src/examples/display-grid/auto-fill-fit.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<template>
<div>
<div class="mb-4">
<h6 class="text-subtitle-1 mb-2">Auto-Fill (keeps empty columns, items stay narrow)</h6>
<div class="d-grid grid-cols-auto-fill-200 ga-4 bg-surface-variant pa-4" style="width: 100%; min-width: 800px;">
<v-sheet
v-for="n in 2"
:key="n"
class="pa-4 text-center"
style="min-height: 80px;"
>
<div class="text-subtitle-2">Fill Item {{ n }}</div>
<div class="text-caption">Stays 200px wide</div>
</v-sheet>
</div>
</div>

<div>
<h6 class="text-subtitle-1 mb-2">Auto-Fit (removes empty columns, items stretch to fill)</h6>
<div class="d-grid grid-cols-auto-fit-200 ga-4 bg-surface-variant pa-4" style="width: 100%; min-width: 800px;">
<v-sheet
v-for="n in 2"
:key="n"
class="pa-4 text-center"
style="min-height: 80px;"
>
<div class="text-subtitle-2">Fit Item {{ n }}</div>
<div class="text-caption">Stretches to fill space</div>
</v-sheet>
</div>
</div>
</div>
</template>
14 changes: 14 additions & 0 deletions packages/docs/src/examples/display-grid/auto-fit-rows.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<template>
<div class="d-grid grid-rows-auto-fit-120 grid-cols-1 ga-4 bg-surface-variant pa-4" style="height: 400px;">
<v-sheet
v-for="n in 5"
:key="n"
class="pa-4 text-center d-flex align-center justify-center"
>
<div>
<div class="text-subtitle-1 mb-2">Row {{ n }}</div>
<div class="text-body-2">Auto-fit rows</div>
</div>
</v-sheet>
</div>
</template>
16 changes: 16 additions & 0 deletions packages/docs/src/examples/display-grid/auto-sizing-columns.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<template>
<div class="d-grid grid-rows-2 grid-auto-cols-min grid-flow-col ga-4 bg-surface-variant pa-4">
<v-sheet class="pa-4 text-center">
<div class="text-body-2">Short</div>
</v-sheet>
<v-sheet class="pa-4 text-center">
<div class="text-body-2">This column has much longer content that will expand the width automatically. </div>
</v-sheet>
<v-sheet class="pa-4 text-center">
<div class="text-body-2">Medium content here</div>
</v-sheet>
<v-sheet class="pa-4 text-center">
<div class="text-body-2">Also short</div>
</v-sheet>
</div>
</template>
11 changes: 11 additions & 0 deletions packages/docs/src/examples/display-grid/basic-grid.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<template>
<div class="d-grid grid-cols-3 ga-4 bg-surface-variant pa-4">
<v-sheet
v-for="n in 6"
:key="n"
class="pa-2 text-center"
>
Item {{ n }}
</v-sheet>
</div>
</template>
19 changes: 19 additions & 0 deletions packages/docs/src/examples/display-grid/column-spanning.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<template>
<div class="d-grid grid-cols-6 ga-4 bg-surface-variant pa-4">
<v-sheet class="col-span-2 pa-2 text-center">
Spans 2 columns
</v-sheet>
<v-sheet class="col-span-4 pa-2 text-center">
Spans 4 columns
</v-sheet>
<v-sheet class="col-span-3 pa-2 text-center">
Spans 3 columns
</v-sheet>
<v-sheet class="col-span-3 pa-2 text-center">
Spans 3 columns
</v-sheet>
<v-sheet class="col-span-full pa-2 text-center">
Spans full width
</v-sheet>
</div>
</template>
39 changes: 39 additions & 0 deletions packages/docs/src/examples/display-grid/complex-layout.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<template>
<div class="d-grid grid-cols-12 ga-2 bg-surface-variant pa-4">
<!-- Header -->
<v-sheet class="pa-4 text-center col-span-12">
Header
</v-sheet>

<!-- Sidebar -->
<v-sheet class="pa-4 text-center col-span-3">
Sidebar
</v-sheet>

<!-- Main content -->
<v-sheet class="pa-4 text-center col-span-6">
Main Content
</v-sheet>

<!-- Right sidebar -->
<v-sheet class="pa-4 text-center col-span-3">
Right Sidebar
</v-sheet>

<!-- Article grid -->
<v-sheet class="pa-4 text-center col-span-4 col-start-4">
Article 1
</v-sheet>
<v-sheet class="pa-4 text-center col-span-4">
Article 2
</v-sheet>
<v-sheet class="pa-4 text-center col-span-4">
Article 3
</v-sheet>

<!-- Footer -->
<v-sheet class="pa-4 text-center col-span-12">
Footer
</v-sheet>
</div>
</template>
16 changes: 16 additions & 0 deletions packages/docs/src/examples/display-grid/grid-auto-sizing.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<template>
<div class="d-grid grid-cols-2 grid-auto-rows-min ga-4 bg-surface-variant pa-4">
<v-sheet class="pa-4 text-center">
<div class="text-body-2">Short</div>
</v-sheet>
<v-sheet class="pa-4 text-center">
<div class="text-body-2">This is a much longer piece of content that will expand the row height. Notice how this row is bigger than the other row.</div>
</v-sheet>
<v-sheet class="pa-4 text-center">
<div class="text-body-2">Also short</div>
</v-sheet>
<v-sheet class="pa-4 text-center">
<div class="text-body-2">Another item with content</div>
</v-sheet>
</div>
</template>
11 changes: 11 additions & 0 deletions packages/docs/src/examples/display-grid/grid-flow-column.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<template>
<div class="d-grid grid-cols-3 grid-flow-col ga-4 bg-surface-variant pa-4">
<v-sheet
v-for="n in 6"
:key="n"
class="pa-4 text-center"
>
Item {{ n }}
</v-sheet>
</div>
</template>
19 changes: 19 additions & 0 deletions packages/docs/src/examples/display-grid/grid-positioning.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<template>
<div class="d-grid grid-cols-3 grid-rows-3 ga-4 bg-surface-variant pa-4">
<v-sheet class="pa-4 text-center col-1 row-1">
1,1
</v-sheet>
<v-sheet class="pa-4 text-center col-2 row-2">
2,2
</v-sheet>
<v-sheet class="pa-4 text-center col-3 row-3">
3,3
</v-sheet>
<v-sheet class="pa-4 text-center col-2 row-1">
2,1
</v-sheet>
<v-sheet class="pa-4 text-center col-1 row-3">
1,3
</v-sheet>
</div>
</template>
26 changes: 26 additions & 0 deletions packages/docs/src/examples/display-grid/grid-spans.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<template>
<div class="d-grid grid-cols-4 grid-rows-3 ga-4 bg-surface-variant pa-4">
<v-sheet class="pa-4 text-center col-span-2">
Spans 2 columns
</v-sheet>
<v-sheet class="pa-4 text-center">
Normal
</v-sheet>
<v-sheet class="pa-4 text-center row-span-2">
<div>Spans</div>
<div>2 rows</div>
</v-sheet>
<v-sheet class="pa-4 text-center">
Item 1
</v-sheet>
<v-sheet class="pa-4 text-center">
Item 2
</v-sheet>
<v-sheet class="pa-4 text-center">
Item 3
</v-sheet>
<v-sheet class="pa-4 text-center col-span-3">
Spans 3 columns
</v-sheet>
</div>
</template>
13 changes: 13 additions & 0 deletions packages/docs/src/examples/display-grid/responsive-grid.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<template>
<div>
<div class="d-grid grid-cols-1 grid-cols-md-2 grid-cols-lg-3 ga-4 bg-surface-variant pa-4 mb-6">
<v-sheet
v-for="n in 6"
:key="n"
class="pa-2 text-center"
>
Responsive Item {{ n }}
</v-sheet>
</div>
</div>
</template>
Loading