Day 1 of #100DaysOfCode: Design a layout for shopping cart template with CSS grid and Media query

Introduction

What I did on the first day is to create a template for a shopping cart.
Design a layout is a good practice for using some CSS frameworks like CSS grid and Media query for the front-end developer.

Implementations

CSS grid containers

The layout for desktop consists of two CSS grid box.

• The sidebar and products are the containers of the box 1, the blue one.

.grid-box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 100px;
    border-radius: 5px;
 }

• The form is the containers of box 2, the green one.

.grid-box2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 400px;
    border-radius: 5px;
 }

CSS grid items for desktop

• Layout
  

• Code
  

 .products {
    grid-column-start: 2;
    grid-column-end: 4;
 }

 .sidebar1 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 3;
 }

 .step2 {
    grid-column-start: 2;
    grid-column-end: 4;
}

CSS grid items for moble

• Layout
  

• Code
  

 .sidebar1 {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 3;
     }    

     .products {
        grid-column-start: 1;
        grid-column-end: 4;
     }

Articles

There are some of my articles. Feel free to check if you like!

• My blog-posts for software developing: https://medium.com/a-layman
• My website: https://www.alayman.io/
• Facebook page: https://www.facebook.com/imalayman