SHARE
TWEET

Grid Template CSS

iaematt Jun 1st, 2020 (edited) 1,641 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /* RESET PADRÃO DE CSS */
  2. * {
  3.   margin: 0;
  4.   padding: 0;
  5.   outline: 0;
  6.   box-sizing: border-box;
  7. }
  8.  
  9. /* BODY CSS */
  10. body {
  11.   background-color: #111111;
  12.   color: #fafafa;
  13.   font-family: "Roboto", sans-serif;
  14.   font-size: 14px;
  15. }
  16.  
  17. /* CSS DO MENU QUE É SÓ DE EXEMPLO, IGNORE */
  18. .menu {
  19.   height: 60px;
  20.   width: 100%;
  21.   background-color: #292929;
  22.   display: flex;
  23.   align-items: center;
  24. }
  25.  
  26. .menu h1 {
  27.   font-size: 20px;
  28.   text-transform: uppercase;
  29. }
  30.  
  31. /* CORES DE FUNDO PARA EXEMPLO */
  32. .green {
  33.   background-color: #16a085;
  34. }
  35. .blue {
  36.   background-color: #2980b9;
  37. }
  38. .purple {
  39.   background-color: #8e44ad;
  40. }
  41. .red {
  42.   background-color: #c0392b;
  43. }
  44. .orange {
  45.   background-color: #f39c12;
  46. }
  47. .yellow {
  48.   background-color: #f1c40f;
  49. }
  50.  
  51. /* CONTAINER PAI DOS BOX */
  52. .container {
  53.   width: 1000px; /* TAMANHO DO CONTAINER */
  54.   margin: 0 auto; /* ALINHAMENTO AO CENTRO */
  55. }
  56.  
  57. /* CSS DO GRID */
  58. .grid-template {
  59.   margin: 20px auto 0; /* ESPAÇAMENTO ENTRE AS DIVS */
  60.  
  61.   /*
  62.   * INFORMA QUE ESSA DIV SERÁ DO TIPO GRID.
  63.   */
  64.   display: grid;
  65.  
  66.   /*
  67.   * O GRID TEMPLATE CONSISTE EM PEGAR O VALOR TOTAL DO CONTAINER
  68.   * NO CASO 1000px E DIVIDIR ENTRE OS BOXs QUE CONTEM DENTRO DESSE GRID TEMPLATE
  69.   * 1000px / 4 REPETIÇÕES = 250px CADA BOX.
  70.   * 1fr (_FRAÇÃO_) = 250px
  71.   * SE ALTERAR PARA 5 REPETIÇÕES 1fr SERA IGUAL A 200px NESSE EXEMPLO
  72.   */
  73.   grid-template-columns: repeat(4, 1fr);
  74.  
  75.   /*
  76.   * O GRID GAP CONSISTE EM DÁ UM ESPAÇAMENTO INTERNO DO GRID ENTRE OS BOX
  77.   * NO CASO 10px ENTRE O BOX LATERAL E O BOX INFERIOR SE EXISTIR
  78.   ** APAGUE O GRID GAP E OS BOX VÃO OCUPAR TODO O ESPAÇO
  79.   */
  80.   grid-gap: 10px;
  81. }
  82.  
  83. /*
  84.  * A BOX EM SI NÃO PRECISA DE DEFINIÇÃO DE LARGURA, PORQUE ELA
  85.  * ERDA A LARGURA DO GRID TEMPLATE
  86.  */
  87. .box {
  88.   height: 220px;
  89. }
  90.  
  91. /*
  92.  * ESSE MEDIA QUERY VERIFICA SE O DISPOSITIVO TEM UM MAXIMO DE 1023px
  93.  * E FAZ O AJUSTE, NO CASO RESOLUÇÕES DE TABLETS
  94.  */
  95. @media screen and (max-width: 1023px) {
  96.   .container {
  97.     width: 100%; /* OCUPA 100% DA TELA DO DISPOSITIVO */
  98.   }
  99.  
  100.   .grid-template {
  101.     /*
  102.      * AJUSTA O GRID TEMPLETE PARA QUE TENHA APENAS 2 REPETIÇÕES
  103.      * E QUE CADA UMA OCUPE 50% DO ESPAÇO DISPONÍVEL
  104.      * 1fr NESSE EXEMPLO EQUIVALE A 50% DE 95% QUE FOI DEFINIDO NO CONTAINER PAI
  105.      */
  106.     grid-template-columns: repeat(2, 1fr);
  107.   }
  108.  
  109.   /* PRECISAMOS INFORMAR O TAMANHO DA BOX NESSE EXEMPLO,
  110.      PARA QUE ELA OCUPE TODO O ESPAÇO DISPONÍVEL */
  111.   .box {
  112.     width: 100%;
  113.   }
  114. }
  115.  
  116. @media screen and (max-width: 767px) {
  117.   .container {
  118.     width: 100%; /* OCUPA 100% DA TELA DO DISPOSITIVO */
  119.   }
  120.  
  121.   .grid-template {
  122.     /*
  123.      * AJUSTA O GRID TEMPLETE PARA QUE TENHA APENAS 1 REPETIÇÃO
  124.      * E QUE CADA UMA OCUPE 100% DO ESPAÇO DISPONÍVEL
  125.      * 1fr NESSE EXEMPLO EQUIVALE A 100% DE 95% QUE FOI DEFINIDO NO CONTAINER PAI
  126.      */
  127.     grid-template-columns: repeat(1, 1fr);
  128.   }
  129. }
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