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 web resume: https://jenhsuan.github.io/ALayman/cover.html
- Facebook page: https://www.facebook.com/imalayman
Top comments (0)