display: griddisplay: griddiv tags to create a wrapper and to create a grid containerUse CSS grid display to create a two-column layout.
You will use id selectors to style your wrapper, banner, sidebar and colophon. You'll use an element selector to style your main. You'll use a class selector for grid container; call it "sidebar-grid".
Put background colors in your body, wrapper, banner, sidebar, main and colophon. You can use whatever colors you like, or you can emulate the screenshots.
Important: you must use the id and class selectors specified above. Do NOT use element selectors except to style the body and main. You will be using an embedded style sheet.
The semantic structural tags are complete, but you will need to add one div tag to each page so that you can create a fixed-width centered layout. It needs to encompass the entire live space from the banner to the colophon (screenshots can help you see this)
You also need to add the proper ids to the layout elements: banner, sidebar, menu, colophon. Our PDF lecture notes have more details about this. These ids let you use id selectors to style the "big picture" layout more easily. Note: we're not styling the menu, but you need to get in the habit of using that id.
The live space in each layout is 1000px.
You need to add a second div to the markup to encompass the sidebar and the main content. This will be your "grid container." Remember that display: grid works by laying out the child elements of the grid container into columns as you specify with the grid-template-columns property. You will have two children in the grid container: your aside and your main.
The width of the sidebar is 22%. The width of the main is 76%. The column gap is 2%.
Sidebar is on the left. This is reflected in the code order (grid lays out the columns in the normal flow).
Sidebar is on the right. This is reflected in the code order: take note that the aside follows the main. You'll need to change the percentages of your columns so the second column is the narrow one.
You want to be sure you've written valid markup and valid styles. Use the online validator tools to check your work. If there are errors, read what the validator says about them and check the lines in your markup where the errors occur.