display: gridで行数を固定したい

Question

display: gridで行数を固定したいのですが、やり方がわからないのでどなたかご教授お願いします。

####実装したいこと
行数を４行に固定し、データの数によって列数が決まる。

現状のレイアウト

使用しているjsonデータ

{
   "type": "かず",
   "color": "#FF0000",
   "kanji": "一二三四五六七八九十"
},

<template lang="pug">
    div.keys-table-kanji
        div.keys-group(v-for="key in keys")
            div.kanji-tab(
                :style="getTabColorStyle(key)"
            ) {{key.type}}
            div.kanji-keys
                Key(
                    v-for="kanji in splitKanji(key.kanji)"
                    :value="kanji"
                    :style="getKeyColorStyle(key)"
                    @click="onKey"
                ).kanji-key
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import Key from '@/components/softwareKeyboard/Key.vue';
import { KeyboardKanji } from '@/theme/types';

@Component({
    components: { Key, KeysTable},
})
export default class KeysTableKanji extends Vue {
    @Prop() keys: KeyboardKanji[] | undefined;
    private modal = false;


    private onKey(value: string) {
        this.$emit('click', value);
    }
    private getTabColorStyle(item: KeyboardKanji) {
        return {
            background: item.color,
        };
    }
    private getKeyColorStyle(item: KeyboardKanji) {
        return {
            borderColor: item.color,
            border: `solid ${item.color} 2px`
        };
    }
    private splitKanji(value: string) {
        return value.split('')
    }
}
</script>
<style scoped>
.kanji-keys{ //ここを編集したい
    margin-top: 8px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 6px;
    width: 100%;
}
.kanji-key {
    width: 40px;
}
</style>

コード

追加

Answer 1

こんにちは。

grid-auto-flow: columnを試してみてはどうでしょうか。

サンプル

参考：
grid-auto-flow - CSS: Cascading Style Sheets | MDN

Comments

[NakaShun_1129]

ありがとうございます！期待通りのレイアウトになりました。
追加で質問したいことがあるのですが、追加した画像のような順番で並べることはできますでしょうか？
現状、縦方向に順番に配置されるのを横方向に配置していきたいです。

[Lhankor_Mhy]

それはCSSだけだと難しいような気がしますね。

[NakaShun_1129]

返信いただきありがとうございます！
CSSだけでは難しいようなので今回は一旦教えていただいたやり方でで進めたいと思います。

[Lhankor_Mhy]

お役に立てたようで何よりです。

CSS Grid の masonry が各ブラウザで対応されるようになれば、試していませんが、CSSだけでもできるようになるかもしれません。
（現状では 開発版Firefox のみ対応）
https://coliss.com/articles/build-websites/operation/css/css-masonry-layouts-in-firefox.html

[NakaShun_1129]

先日CSSだけだと難しいと回答をいただいたgridの並びについてなのですが、
この要件をどうしても満たさねければならない場合Lhankor_Mhy様はどのようなやり方で実装しますでしょうか？頼ってばかりですみません、何かありましたらアドバイスをいただきたいです。

[Lhankor_Mhy]

JavaScript で解決すると思います。

[Lhankor_Mhy]

適当に書いたので、もっとうまい書き方があると思います。
https://jsfiddle.net/Lhankor_Mhy/jd2f6g9y/1/