Coderock Canada
Greetings hope you enjoy these html css and javascript code snippets to assist you on your web design journey.
Coderock
html documentation <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Basics</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="grid-container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> </body> </html> css documentation @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;500;600;800&family=VT323&display=swap'); body { margin: 30px; font-family: "Poppins"; } .grid-container { background: #eee; max-width: 900px; margin: 0 auto; display: grid; /* grid-template-columns: 300px 300px 300px; */ grid-template-columns: repeat(6, 1fr); grid-template-rows: 100px 100px 200px; grid-gap: 10px; justify-items: stretch; /* default is stretch */ align-items: stretch; /* default is stretch */ } ....
Video for Hugo
html documentation <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Basics</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="grid-container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> </body> </html> css documentation @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;500;600;800&family=VT323&display=swap'); body { margin: 30px; font-family: "Poppins"; } .grid-container { background: #eee; max-width: 900px; margin: 0 auto; display: grid; /* grid-template-columns: 300px 300px 300px; */ grid-template-columns: repeat(6, 1fr); grid-template-rows: 100px 100px 200px; grid-gap: 10px; justify-items: stretch; /* default is stretch */ align-items: stretch; /* default is stretch */ } ....