As a newcomer to the world of CSS, I found myself in need of a grid layout for a quick project. Here's the mishmash of CSS code I came up with:
body {
margin: 40px;
}
.container {
display: grid;
grid-template-rows: [row1start] 20% [row2start] 20% [row3start] 10% [row4start] 50% auto [last_col];
grid-template-columns: [column_one_start] 50% [column_two_start] 50% auto [end];
justify-items: stretch;
grid-gap: 1rem;
}
.container.row1 {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
grid-column-start: column_one_start;
grid-column-end: span 2;
grid-row-start: row1start;
grid-row-end: span 1;
justify-self: center;
align-self: stretch;
}
.container.row2 {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
grid-column-start: column_one_start;
grid-column-end: span 2;
grid-row-start: row2start;
grid-row-end: span 1;
justify-self: center;
align-self: stretch;
}
.container.row3 {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
grid-column-start: column_one_start;
grid-column-end: span 2;
grid-row-start: methodology_row_start;
grid-row-end: span 1;
justify-self: center;
align-self: stretch;
}
.container.row4 {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
grid-column-start: column_one_start;
grid-column-end: span 2;
grid-row-start: row4start;
justify-self: center;
align-self: stretch;
}
In essence, my goal was to create 4 rows (or tracks) that occupy 20%, 20%, 10%, and 50% of the space respectively. Below is the HTML snippet I used:
<!DOCTYPE html>
<html lang="en" dir="ltr" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="utf-8">
<title>Template</title>
<link rel="stylesheet" href="{{ url_for('static',filename='css/container.css') }}">
</head>
<body>
<header>
<h1 class="logo">Template with grid</h1>
</header>
<div class="container">
<div class="row1">
<p>Row 1</p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Esse aliquid laboriosam minima ex praesentium recusandae
reprehenderit unde sit tempore atque aut commodi quae expedita
corrupti, dignissimos architecto. Eius, maiores ad?
</div>
<div class="row2">
<p>Row 2</p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Esse aliquid laboriosam minima ex praesentium recusandae
reprehenderit unde sit tempore atque aut commodi quae expedita
corrupti, dignissimos architecto. Eius, maiores ad?
</div>
<div class="row3">
<p>Row 3</p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Esse aliquid laboriosam minima ex praesentium recusandae
reprehenderit unde sit tempore atque aut commodi quae expedita
corrupti, dignissimos architecto. Eius, maiores ad?
</div>
<div class="row4">
<p>Row 4</p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Esse aliquid laboriosam minima ex praesentium recusandae
reprehenderit unde sit tempore atque aut commodi quae expedita
corrupti, dignissimos architecto. Eius, maiores ad?
</div>
</div>
</body>
</html>
I'm aiming for this visual layout:
To address any misalignments like "Row 2" wandering off course, everything seems to display correctly when opened in Opera directly, but not within my Flask app using render_template(). It's being called simply with something like:
@app.route('/')
def home():
return render_template("template02.html")
Why isn't render_template() respecting my layout?