WebエンジニアにとってCSS Grid Layoutを使用する機会は増えてきているのではないでしょうか。
縦横の2次元に対して自由にレイアウトを組むことができるので非常に便利です。
そしてCSS Grid Layoutを使う中で、下の画像のように「ある領域に同じ要素を複数並べていったときに、領域の最後にスキマができてしまうので、このスキマをいい感じに埋めたい」
というケースに遭遇したことはないでしょうか。
正直なところ、遭遇したことがある人、これから遭遇する人は多くないと思いますが、これを実現するためのライブラリを以前作ったので、これのVueアプリケーション上での使い方を紹介させていただきたいと思います。
ライブラリはこちらです。Grid Spacer
使うと次のようになんとなくいい感じにスキマが埋まります。
使い方
ますはインストールしてください。
> npm i grid-spacer
Vueでの使い方は、以下のようになります。
<script setup lang="ts">
import { onMounted } from 'vue'
import { useGridSpacer } from 'grid-spacer'
const { execute } = useGridSpacer({
containerClass: 'container',
spacerClass: 'box',
spacerTag: 'div',
type: 'fill'
})
onMounted(() => execute())
</script>
<template>
<div class="container">
<div class="box" v-for="i in 13" :key="i">
<div class="content" />
</div>
</div>
</template>
<style scoped>
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 4px;
width: 90%;
margin: 48px auto;
}
:deep(.box) {
background-color: gray;
width: 100%;
height: 100px;
}
</style>
useGridSpacer から返される execute 関数を onMounted フックで実行するだけです。
scoped styleを使う場合は、要素のクラスに対して :deepセレクタを使用してください。
そして、 useGridSpacer に渡すオプションは次のような感じです。
- containerClass ... 要素が並ぶ領域のクラス名。
- spacerClass ... スキマを埋める要素のクラス名。
- spacerTag ... スキマを埋める要素のタグ名。
- type ... スキマを埋める形式。
fillだと１つの要素で、fitだと複数要素で埋める。
fit type を使った場合は下のようになります。
まとめ
もしこんなことがしたいケースに遭遇したら、使ってみてもらえればなと思います。