04_Handout_1(9).pdf

IT2301 A RESPONSIVE WEBSITE CSS Grid Layout (Casabona, 2021) Mobile developments have allowed websites to be viewed on computers, phones, smart watches, or kitchen appliances. It is where the importance of responsive web design comes in. A responsive web de...

IT2301 A RESPONSIVE WEBSITE CSS Grid Layout (Casabona, 2021) Mobile developments have allowed websites to be viewed on computers, phones, smart watches, or kitchen appliances. It is where the importance of responsive web design comes in. A responsive web design ensures that the website is accessible and visible no matter what device is used. CSS Grid, or Grid, is a modern solution for creating flexible layouts that work correctly on different screen sizes as it organizes content into two (2) dimensions: rows and columns. Grid uses the display property with a second property, such as grid-template-columns and grid- template-rows. It tells the browser the number of columns to be created and how wide they should be. main { This code is used when three (3) equal-width columns are required, with each value specifying each column. display: grid; The main tag specifies the main content in the HTML grid-template-columns: 30% 30% 30%; document, and it can enclose several sections/articles } but should not contain any repeated content across the document. This code results in this structure on the webpage: Figure 1. Retrieved from Casabona, J. (2020). Visual quickstart guide: HTML and CSS. Pearson Education, Inc. Creating a two-column layout using Grid: HTML: Style Sheet: The gap property can be used to space main { the rows and columns using row-gap and display: grid; column-gap properties.... grid-template-columns: 68% 28%; row-gap: 15px; column-gap: 15px; tag specifies independent and... } self-content and encloses various elements such as header and paragraphs. tag specifies some content besides the content it is placed in and is usually presented as sidebars. 04 Handout 1 *Property of STI  [email protected] Page 1 of 3  IT2301 Viewport is the exact area of the screen that is rendering the website. In mobile devices, it is the full screen of a device, while it is the width and height of a browser window. This viewport element should be included in all HTML webpages and always go inside the element. It gives the browser instructions on