/* limited width, nice justification */ body { font-family: arial, helvetica, sans-serif; width: 90%; margin-left: auto; margin-right: auto; text-align: justify; line-height: 1.5; } h1,h2 { text-align: center; color: #036; } h3 { text-align: left; font-style: italic; } p, li { text-align: justify; } .uline { text-decoration: underline; } div.pic, td { text-align: center; } /* use this for images to be centered */ img.center { display: block; margin: auto; } .bordered { border: solid 1px; border-color: black; } code { display: block; border: 1px solid #CCCCCC; background-color: #FFFFEE; } /* grid layout */ /* Container class. Usually or a top-level

*/ .gridcontainer { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 120px 1fr 1fr; grid-auto-flow: row; grid-row-gap: 10px; grid-column-gap: 10px; min-height: 100vh; margin: 0; } /* Spans the whole first row */ .gridheader { grid-row: 1; grid-column: 1/3; } /* header details */ .gridheader img { float: left; margin: 5px; height: 100px; } .gridheader h1 { float: left; } /* these will be put into row 2,3,... */ .griditem { align: center; } .griditem p { text-align: center; } .griditem img { height: 200px; }