CSS Grid

Submitted by code_admin on Fri, 09/18/2020 - 16:06

See https://www.w3schools.com/code/tryit.asp?filename=GIV8DWOCV2HP

  1. <!DOCTYPE html>
  2. <html>
  3. <style>
  4. .rjmgridlayout {
  5.   display: grid;
  6.   grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  7.   grid-gap: 2rem;
  8.   padding: 2rem;
  9. }
  10.  
  11. .rjmgriditem {
  12.   border-style: solid;
  13.   border-width: thick;
  14.   padding: 1rem;
  15.   background-color: lightblue;
  16. }
  17. </style>
  18. <body>
  19. <main class="wrapper">
  20.   <div class="rjmgridlayout">
  21.     <div class="rjmgriditem">
  22.       SOME TEXT 001
  23.     </div>
  24.     <div class="rjmgriditem">
  25.       SOME TEXT 002SOME TEXT 002SOME TEXT 002SOME TEXT 002SOME TEXT 002SOME TEXT 002SOME TEXT 002
  26.     </div>
  27.     <div class="rjmgriditem">
  28.       SOME TEXT 003
  29.     </div>
  30.     <div class="rjmgriditem">
  31.       SOME TEXT ...
  32.     </div>
  33.     <div class="rjmgriditem">
  34.       SOME TEXT ................. .......... dsfdsf dsf dsf df dsf  ffe fe..............LONG
  35.     </div>
  36.     <div class="rjmgriditem">
  37.       SOME TEXT ...
  38.     </div>
  39.     <div class="rjmgriditem">
  40.       SOME TEXT ...
  41.     </div>
  42.   </div>
  43. </main>
  44.  
  45.  
  46. </body>
  47. </html>
RJM Article Type
Work Notes