LWC：Write about LayoutCard

LayoutCardを使用した画面

画面の大きさによって自動的に一列になってくれます

<template>
    <lightning-card icon-name="custom:custom57" title="LayoutCard">
        <lightning-layout multiple-rows="true">
            <lightning-layout-item size="12" padding="horizontal-small">
                <lightning-input label="item1"></lightning-input>
            </lightning-layout-item>
            <lightning-layout-item size="12" large-device-size="4" padding="horizontal-small">
                <lightning-input label="item2"></lightning-input>
            </lightning-layout-item>
            <lightning-layout-item size="12" large-device-size="4" padding="horizontal-small">
                <lightning-input label="item3"></lightning-input>
            </lightning-layout-item>
            <lightning-layout-item size="12" large-device-size="4" padding="horizontal-small">
                <lightning-input label="item4"></lightning-input>
            </lightning-layout-item>
            <lightning-layout-item size="6" padding="horizontal-small">
                <lightning-input label="item5"></lightning-input>
            </lightning-layout-item>
            <lightning-layout-item size="6" padding="horizontal-small">
                <lightning-input label="item6"></lightning-input>
            </lightning-layout-item>
            <lightning-layout-item size="12" large-device-size="3" padding="horizontal-small">
                <lightning-input label="item7"></lightning-input>
            </lightning-layout-item>
            <lightning-layout-item size="12" large-device-size="3" padding="horizontal-small">
                <lightning-input label="item8"></lightning-input>
            </lightning-layout-item>
            <lightning-layout-item size="12" large-device-size="3" padding="horizontal-small">
                <lightning-input label="item9"></lightning-input>
            </lightning-layout-item>
            <lightning-layout-item size="12" large-device-size="3" padding="horizontal-small">
                <lightning-input label="item10"></lightning-input>
            </lightning-layout-item>
        </lightning-layout>
    </lightning-card>   
</template>

メモ：
multiple-rows="true"　→複数列での表示が可能になる、定義しない場合、一行目のみ表示されます。

lightning-layout-item　size=12/6/3
この size では、画面幅を12分割したうちのいくつ分の幅にするかを指定します
2列表示なら、6にします。
3列表示なら、4にします。
4列表示なら、3にします。

small-device-size属性はスマートフォン、
medium-device-size属性はタブレット、
large-device-sizeデスクトップまたはそれ以上のデバイスを示します。