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

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

jenhsuan profile image Jen-Hsuan Hsieh Updated on ・1 min read

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
    Alt Text

  • 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
    Alt Text

  • 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!

Posted on by:

jenhsuan profile

Jen-Hsuan Hsieh

@jenhsuan

6+ year work experience in the software engineering field. 2+ year work experience with front-end JavaScript framework like React.js, Knockout.js. and Microsoft solution.

Discussion

markdown guide