SHARE
TWEET

Untitled

a guest Jun 24th, 2019 59 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <div class="grid-container">
  2. <div class="grid">
  3. <div class="grid-col grid-col--fixed-left">
  4.   <div class="grid-item grid-item--header">
  5.     <p>HEAD</p>
  6.   </div>
  7.   <div class="grid-item">
  8.     <p>Hello</p>
  9.   </div>
  10.   <div class="grid-item">
  11.     <p>Hello</p>
  12.   </div>
  13.   <div class="grid-item">
  14.     <p>Hello</p>
  15.   </div>
  16.   <div class="grid-item">
  17.     <p>Hello</p>
  18.   </div>
  19.   <div class="grid-item">
  20.     <p>Hello</p>
  21.   </div>
  22.   <div class="grid-item">
  23.     <p>Hello</p>
  24.   </div>
  25.   <div class="grid-item">
  26.     <p>Hello</p>
  27.   </div>
  28.   <div class="grid-item">
  29.     <p>Hello</p>
  30.   </div>
  31.   <div class="grid-item">
  32.     <p>Hello</p>
  33.   </div>
  34.   <div class="grid-item">
  35.     <p>Hello</p>
  36.   </div>
  37. </div>
  38. <div class="grid-col">
  39.   <div class="grid-item grid-item--header">
  40.     <p>HEAD</p>
  41.   </div>
  42.   <div class="grid-item">
  43.     <p>P</p>
  44.   </div>
  45.   <div class="grid-item">
  46.     <p>P</p>
  47.   </div>
  48.   <div class="grid-item">
  49.     <p>P</p>
  50.   </div>
  51.   <div class="grid-item">
  52.     <p>P</p>
  53.   </div>
  54.   <div class="grid-item">
  55.     <p>P</p>
  56.   </div>
  57.   <div class="grid-item">
  58.     <p>P</p>
  59.   </div>
  60.   <div class="grid-item">
  61.     <p>P</p>
  62.   </div>
  63.   <div class="grid-item">
  64.     <p>P</p>
  65.   </div>
  66.   <div class="grid-item">
  67.     <p>P</p>
  68.   </div>
  69.   <div class="grid-item">
  70.     <p>P</p>
  71.   </div>
  72. </div>
  73. <!--all the other columns are the same-->
  74. </div>
  75. </div>
  76.      
  77. .grid-container {
  78. display: grid; /* This is a (hacky) way to make the .grid element size to fit                                  its content */
  79. overflow: auto;
  80. height: 300px;
  81. width: 600px;
  82. }
  83. .grid {
  84. display: flex;
  85. flex-wrap: nowrap;
  86. }
  87. .grid-col {
  88. width: 150px;
  89. min-width: 150px;
  90. }
  91.  
  92. .grid-item--header {
  93. height: 100px;
  94. min-height: 100px;
  95. position: sticky;
  96. position: -webkit-sticky;
  97. background: white;
  98. top: 0;
  99. }
  100.  
  101. .grid-col--fixed-left {
  102. position: sticky;
  103. left: 0;
  104. z-index: 9998;
  105. background: white;
  106. }
  107. .grid-col--fixed-right {
  108. position: sticky;
  109. right: 0;
  110. z-index: 9998;
  111. background: white;
  112. }
  113.  
  114. .grid-item {
  115. height: 50px;
  116. border: 1px solid gray;
  117. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top