Having been inspired by Bootstrap's 12 column grid, I created a 12 column layout using CSS grid and I would love to know your thoughts. Is this implementation acceptable or is there a better way to write this? This is uncommon for me based on what I see from YouTube and GitHub, but it seems easier.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style> .container { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(12, 1fr); height: 100vh; } .sec1 { background-color: pink; padding: 25px; border-style: solid; grid-row: span 4; grid-column: span 12; display: grid; grid-template-columns: repeat(12, 1fr); } .sec2 { background-color: salmon; padding: 25px; border-style: solid; grid-row: span 4; grid-column: span 12; display: grid; grid-template-columns: repeat(12, 1fr); } .sec3 { background-color: lightskyblue; padding: 25px; border-style: solid; grid-row: span 4; grid-column: span 12; display: grid; grid-template-columns: repeat(12, 1fr); }</style></head><body><div class="container"><div class="sec1"><div class="el" style="grid-column: span 8;"> Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Quis praesentium, quo illo consequatur cumque nemo rerum natus illum ex officia assumenda, dolore fugiat mollitia, aliquid quisquam totam. Laborum, quisquam, provident!</div><div class="el" style="grid-column: span 4;"> Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Quis praesentium, quo illo consequatur cumque nemo rerum natus illum ex officia assumenda, dolore fugiat mollitia, aliquid quisquam totam. Laborum, quisquam, provident!</div></div><div class="sec2"><div class="el" style="grid-column: span 2;"> Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Quis praesentium, quo illo consequatur cumque nemo rerum natus illum ex officia assumenda, dolore fugiat mollitia, aliquid quisquam totam. Laborum, quisquam, provident!</div><div class="el" style="grid-column: span 10;"> Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Quis praesentium, quo illo consequatur cumque nemo rerum natus illum ex officia assumenda, dolore fugiat mollitia, aliquid quisquam totam. Laborum, quisquam, provident!</div></div><div class="sec3"><div class="el" style="grid-column: span 6;"> Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Quis praesentium, quo illo consequatur cumque nemo rerum natus illum ex officia assumenda, dolore fugiat mollitia, aliquid quisquam totam. Laborum, quisquam, provident!</div><div class="el" style="grid-column: span 6;"> Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Quis praesentium, quo illo consequatur cumque nemo rerum natus illum ex officia assumenda, dolore fugiat mollitia, aliquid quisquam totam. Laborum, quisquam, provident!</div></div></div></body></html>