grid
<!DOCTYPE html>
<html> 
  <head>
    <title>Let's Test Your Memory! </title>
    <link rel="stylesheet" href="style.css">
    </head>
  <body>
    <div class="grid-container">
        <div class="grid-items"><h2>1</h2></div>
      <div class="grid-items"><h2>2</h2></div>
      <div class="grid-items"><h2>3</h2></div>
      <div class="grid-items"><h2>4</h2></div>
      <div class="grid-items"><h2>5</h2></div>
      <div class="grid-items"><h2>6</h2></div>
       <div class="grid-items"><h2>5</h2></div>
       <div class="grid-items"><h2>5</h2></div>
      <div class="grid-items"><h2>6</h2></div>
       <div class="grid-items"><h2>5</h2></div>
      <div class="grid-items"><h2>6</h2></div>
       <div class="grid-items"><h2>5</h2></div>
      \
      
     
    
      
    </div>
  </body>
</html>
body{
  background: #1313;
  padding: 15px;
}
.grid-container{
  border:2px solid red;
  display: grid;
  grid-template-rows: 150px 1fr 150px 1fr 150px;
  grid-template-columns: 150px 150px 150px;

}
.grid-items{
  border:2px solid #13210a;
}
.grid-items:first-child{
  background:#d8f000;
  grid-column:1 / 3;
  grid-row: 1 /3;
}
.grid-items:nth-child(2){
  background:#60fd00;
grid-row:3/5;
}
/* ESLint rules https://eslint.org/docs/2.0.0/rules/ */
/* eslint no-undef: "off" */
  • Archivos
  • Index
  • Style
  • Script
  • README
  • CDN Agregar
HTML
PLEASE WAIT...