I am attempting to create a 3-column page layout, with the center column fluid and the other two columns fixed, similar to the design of Facebook.
Below is the code snippet I have been working on:
<template>
<v-app>
<v-app-bar app color="white" flat>
<v-container class="py-0 fill-height">
<v-responsive max-width="260">
<v-text-field
dense
flat
hide-details
rounded
solo-inverted
></v-text-field>
</v-responsive>
<v-spacer></v-spacer>
</v-container>
</v-app-bar>
<v-main class="grey lighten-3">
<v-container>
<v-row>
<v-col cols="12" sm="2">
<v-sheet rounded="lg" min-height="268">
<!-- content for fixed column -->
</v-sheet>
</v-col>
<v-col cols="12" sm="8">
<!-- Scrollable content for fluid center column -->
<v-sheet rounded="lg" min-height="268"></v-sheet>
<v-sheet rounded="lg" min-height="268"></v-sheet>
<v-sheet rounded="lg" min-height="268"></v-sheet>
</v-col>
<v-col cols="12" sm="2">
<v-sheet rounded="lg" min-height="268">
<!-- content for fixed column -->
</v-sheet>
</v-col>
</v-row>
</v-container>
</v-main>
</v-app>
</template>
Can this layout be achieved using Vuetify's grid system, or would manual CSS coding be necessary?