How to make v-col fixed in Vuetify?

Question

I'm trying to make a 3-column page with the center one fluid and the other two fixed. Like the facebook layout.

Here's the code:

<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">
              <!-- should be fixed -->
            </v-sheet>
          </v-col>

          <v-col cols="12" sm="8">
            <!-- Scrollable  -->
            <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">
              <!-- should be fixed  -->
            </v-sheet>
          </v-col>
        </v-row>
      </v-container>
    </v-main>
  </v-app>
</template>

Is it doable using Vuetify's grid system or do I have to manually do it in CSS?

Answer 1

Fixed by wrapping contents of v-col and setting position to sticky.

Fixed by wrapping contents of `v-col` and setting position to sticky. ```html
<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">
            <div style="position: sticky; top: 76px">
              <v-sheet rounded="lg" min-height="268">
                <!-- should be fixed -->
              </v-sheet>
            </div>
          </v-col>

          <v-col cols="12" sm="8">
            <!-- Scrollable  -->
            <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">
              <!-- should be fixed  -->
            </v-sheet>
          </v-col>
        </v-row>
      </v-container>
    </v-main>
  </v-app>
</template>