Responsive Layouts

HTML

Grid CSS

            
              section {
                display: grid;
                grid-template-columns: 1fr;
              }

              div {
                margin: 10px;
              }
            
          

Grid CSS

            
              section {
                display: grid;
                grid-template-columns: 1fr;
              }

              div {
                margin: 10px;
              }

              @media screen and (min-width: 768px) {
                section {
                  grid-template-columns: 1fr 1fr 1fr;
                }
              }
            
          

Flexbox CSS

            
              section {
                display: flex;
                flex-direction: column;
              }

              div {
                margin: 10px;
              }
            
          

Flexbox CSS

            
              section {
                display: flex;
                flex-direction: row;
              }

              div {
                margin: 10px;
              }

              @media screen and (min-width: 768px) {
                section {
                  flex-direction: row;
                }
              }