Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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
            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?
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
            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>
          </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>
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.