├── README.md ├── index.html ├── main.css └── screenshot.png /README.md: -------------------------------------------------------------------------------- 1 | ![](./screenshot.png) 2 | 3 | # Resources 4 | - https://freefrontend.com/css-background-patterns/ 5 | - https://codepen.io/foxeisen/pen/KgwYJy 6 | - https://www.w3schools.com/css/css_rwd_mediaqueries.asp -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | CSS Grid Layout 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |

CSS GRID

19 |
20 | 21 |
22 |
23 |

Logo

24 |
25 |
26 |
27 |

Title

28 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Est corrupti repudiandae quo amet magnam 29 | mollitia necessitatibus incidunt veritatis officia veniam aperiam, sunt cumque sequi? Perferendis 30 | doloremque quaerat eos quas dolores.

31 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, ipsum? Minus unde quia officiis ipsum 32 | laboriosam dolorem. Similique, recusandae dicta.

33 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, ipsum? Minus unde quia officiis ipsum 34 | laboriosam dolorem. Similique, recusandae dicta.

35 |
36 | 37 |
38 |

Title

39 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Est corrupti repudiandae quo amet magnam 40 | mollitia necessitatibus incidunt veritatis officia veniam aperiam, sunt cumque sequi? Perferendis 41 | doloremque quaerat eos quas dolores.

42 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, ipsum? Minus unde quia officiis ipsum 43 | laboriosam dolorem. Similique, recusandae dicta.

44 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, ipsum? Minus unde quia officiis ipsum 45 | laboriosam dolorem. Similique, recusandae dicta.

46 |
47 |
48 |

Title

49 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Est corrupti repudiandae quo amet magnam 50 | mollitia necessitatibus incidunt veritatis officia veniam aperiam, sunt cumque sequi? Perferendis 51 | doloremque quaerat eos quas dolores.

52 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, ipsum? Minus unde quia officiis ipsum 53 | laboriosam dolorem. Similique, recusandae dicta.

54 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, ipsum? Minus unde quia officiis ipsum 55 | laboriosam dolorem. Similique, recusandae dicta.

56 |
57 |
58 | 59 | 73 | 74 |
75 | Another Post 76 |
77 |
78 | Another Post 79 |
80 |
81 | Another Post 82 |
83 |
84 | Another Post 85 |
86 |
87 | Another Post 88 |
89 | 90 | 94 | 95 |
96 | 97 | 98 | -------------------------------------------------------------------------------- /main.css: -------------------------------------------------------------------------------- 1 | /* General Styles */ 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | } 7 | 8 | body { 9 | /* background-color: #ecf0f1; */ 10 | background: radial-gradient(black 3px, transparent 4px), radial-gradient(black 3px, transparent 4px), linear-gradient(#fff 4px, transparent 0), linear-gradient(45deg, transparent 74px, transparent 75px, #a4a4a4 75px, #a4a4a4 76px, transparent 77px, transparent 109px), linear-gradient(-45deg, transparent 75px, transparent 76px, #a4a4a4 76px, #a4a4a4 77px, transparent 78px, transparent 109px), #fff; 11 | background-size: 109px 109px, 109px 109px, 100% 6px, 109px 109px, 109px 109px; 12 | background-position: 54px 55px, 0px 0px, 0px 0px, 0px 0px, 0px 0px; 13 | color: #000000; 14 | font-family: 'Manjari', sans-serif; 15 | } 16 | 17 | /* HEADER */ 18 | 19 | .title h1 { 20 | padding: 20px 0; 21 | text-align: center; 22 | font-size: 2.9em; 23 | text-transform: uppercase; 24 | } 25 | 26 | /* CONTAINER */ 27 | 28 | .container { 29 | width: 90%; 30 | max-width: 1000px; 31 | margin: 1.6em auto; 32 | display: grid; 33 | gap: 1.6em; 34 | /* grid-template-columns: repeat(4, 1fr) 3%; */ 35 | grid-template-columns: repeat(5, 1fr); 36 | } 37 | 38 | .container>.header, .container>.content, .container>.sidebar, .container>.footer, .container>div { 39 | background: #fff; 40 | padding: 20px; 41 | border: 1px solid #000000; 42 | } 43 | 44 | .container>.header, .container>.footer { 45 | grid-column: 1/-1; 46 | background-color: #1e272e; 47 | color: #ffffff; 48 | } 49 | 50 | .container>.content { 51 | grid-column: span 3; 52 | grid-row: span 4; 53 | } 54 | 55 | .content>.article { 56 | background: #808e9b; 57 | padding: 20px; 58 | margin-top: 5px; 59 | color: #dfe6e9 60 | } 61 | 62 | .content .article h1, 63 | .content .article p { 64 | padding: 10px; 65 | } 66 | 67 | .container>.sidebar { 68 | grid-column: span 2; 69 | grid-row: span 4; 70 | background: #485460; 71 | color: #ffffff; 72 | display: flex; 73 | align-items: center; 74 | justify-content: center; 75 | } 76 | 77 | .container .sidebar img { 78 | display: block; 79 | width: 100%; 80 | margin-top: 5px; 81 | } 82 | 83 | .container>.related-post { 84 | background: #2d3436; 85 | color: #ffffff; 86 | height: 180px; 87 | ; 88 | display: flex; 89 | align-items: center; 90 | justify-content: center; 91 | transition: all 0.5s ease; 92 | } 93 | 94 | .container>.related-post:hover { 95 | cursor: pointer; 96 | color: #000000; 97 | background: #ffffff; 98 | } 99 | 100 | /* MEDIA QUERIES */ 101 | 102 | @media screen and (max-width: 768px) { 103 | .header { 104 | text-align: center; 105 | } 106 | .container .content { 107 | grid-column: 1 / -1; 108 | } 109 | .container .sidebar { 110 | grid-column: 1 / 6; 111 | } 112 | 113 | .container .related-post { 114 | grid-column: 1/-1; 115 | } 116 | } -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FaztWeb/cssgrid-layout-example/6cf219fd67ab02b21399f10edc6725d8be95bc0a/screenshot.png --------------------------------------------------------------------------------