antd check box (a-checkbox-group) arranged vertically

1. Introduction to the scene

The Checkbox group is displayed horizontally by default, and the requirement is to change it to vertical display.

2. Solutions

fill in a codestyle="display: grid;"

3. Effect display

4. Complete code

<template>
  <div>
    <a-checkbox-group
      v-model="value"
      name="checkboxgroup"
      :options="plainOptions"
      style="display: grid;"
    />
  </div>
</template>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      value: [],
      plainOptions: ['Apple', 'Pear', 'Orange'],
    }
  }
}
</script>

5. Analysis

• The grid
  element behaves like a block-level element and lays out its content according to the grid model .