What are some examples of layouts in Vue.js?

What are some examples of layouts in Vue.js?

Vue.js offers various layout examples, such as grid layouts, flexbox layouts, and card layouts. Would you like to see specific code examples?

Yes, please show me a grid layout example.

Here's a simple grid layout example using Vue.js:

<template>
  <div class="grid-container">
    <div class="grid-item" v-for="item in items" :key="item.id">{{ item.name }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    };
  }
};
</script>

<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.grid-item {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
}
</style>

That looks great! Can you explain how flexbox layouts work in Vue?

Sure! Flexbox layouts in Vue.js allow you to create responsive designs easily. You can use the display: flex; property in your CSS to arrange items in a flexible way. Would you like a code example for that?