SHARE
TWEET

Untitled

a guest Sep 19th, 2019 98 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. .container{
  2.   display: grid;
  3.   grid-template-columns: 1fr 1fr 1fr;
  4.   /* Supplies different heights for the rows */
  5.   grid-template-rows: 50px 1fr 50px;
  6. }
  7. .top{
  8.   background-color: lightskyblue;
  9.  
  10.   /* Define header component area using line numbers */
  11.   grid-area: 1/1/2/4;
  12.   /* OR */
  13.   /* Define header component area by grid start point and number of spans over grids */
  14.   grid-area: 1/1/span 1/span 3;
  15. }
  16.  
  17. .sidebar{
  18.   background-color: lightsalmon;
  19.  
  20.   grid-area: 2/1/3/2;
  21.   /* OR */
  22.   grid-area: 2/1/span 1/ span 1;
  23. }
  24.  
  25. .main{
  26.   background-color: lightgoldenrodyellow;
  27.  
  28.   grid-area: 2/2/3/4
  29.   /* OR */
  30.   grid-area: 2/2/span 1/ span 2;
  31. }
  32. .bottom{
  33.   background-color: yellowgreen;
  34.  
  35.   grid-area: 3/1/4/4;
  36.   /* OR */
  37.   grid-area: 3/1/span 1/span 3;
  38. }
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