I am quite new to css, so for a quick project of mine I needed a gridlayout and came up with this hotch-potch of css:
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;
}
Essentially, all I want to do is to have 4 rows (tracks, in css terminology), each resp. occupying 20,20,10,50 percent of the space.
Here is my html:
<!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 would like to get this to look as I want:
Right now Row 2 is wandering somewhere in column 2, for example.
I want them all nicely occupy their respective spaces, with empty space left,
if necessary, in their respective compartments (if a row is not filled fully,
let it be padded with blanks).
EDIT: Hey, I am sorry, I just opened this in Opera just by clicking, and it seems to work. Looks like my Flask app's render_template() is screwing things up. And I am calling it with just something like:
@app.route('/')
def home():
return render_template("template02.html")
So, why is render_template() not honoring my layout?
