css - GridLayout 没有正确放置行

问题描述

我对很陌生css，所以对于我的一个快速项目，我需要一个gridlayout并想出了这个大杂烩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;
}

本质上，我想要做的就是有4行（tracks，在css术语中），每个 resp。占据20,20,10,50百分之几的空间。这是我的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>

我想让它看起来像我想要的那样：

例如，现在Row 2正在某处徘徊 column 2。我希望它们都很好地占据各自的空间，如有必要，在各自的隔间中留下空白空间（如果一行没有完全填满，让它用空白填充）。

编辑：嘿，对不起，我只是通过单击在 Opera 中打开了它，它似乎可以工作。看起来我Flask的应用程序render_template()搞砸了。我只是这样称呼它：

@app.route('/')
def home():
    return render_template("template02.html")

那么，为什么render_template()不尊重我的布局呢？

标签： cssflaskcss-grid

css - GridLayout 没有正确放置行

问题描述

解决方案

推荐阅读