CSS grid placing all items in the top right corner

Question

Any idea why this is placing all items in the top right corner ?

if i put the

grid-template-areas:
    ". . title title . ."
    ". . server server . ."
    ". . who who . ."
    ". . toWho toWho . ."
    ". . what what . .";

It works fines, however i want to add some icons to the first div (one in the left side and other in the right side). So i did created two more columns for that purpose but when adding them into the grid-template-areas they place all items in the top right corner. Any idea what i am doing wrong here ?

Thanks in advance

* {
    margin: 0;
    padding: 0;
}

.paper {
    display: grid;
    grid-template-columns: 1fr 40px 200px 200px 40px 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas:
    ". logo title title server ."
    ". server server server server ."
    ". who who who who ."
    ". toWho toWho toWho toWho ."
    ". what what what what .";
}

.paper div {
    border-width: 5px;
    border-color: black;
    border: double;
}

/* https://www.youtube.com/watch?v=HgwCeNVPlo0 */

.server {
    grid-area: server;
}

.title {
    grid-area: title;
}

.logo {
    grid-area: logo;
}

.who {
    grid-area: who;
}

.what {
    grid-area: what;
}

.toWho {
    grid-area: toWho;
}

<body>
    <div class="paper">
        <div class="server">server</div>
        <div class="title">titleText</div>
        <div class="logo">logo</div>
        <div class="who">who</div>
        <div class="what">what</div>
        <div class="toWho">toWho</div>
    </div>
</body>

Panwen Wang · Accepted Answer · 2020-07-14T20:14:59.527

The problem is that your second row (servers) is taking up all spaces (columns). However, it is supposed to take only one column by your definition in the first row.

* {
    margin: 0;
    padding: 0;
}

.paper div {
    border-width: 5px;
    border-color: black;
    border: double;
}

/* https://www.youtube.com/watch?v=HgwCeNVPlo0 */

.server {
    grid-area: server;
}

.title {
    grid-area: title;
}

.logo {
    grid-area: logo;
}

.who {
    grid-area: who;
}

.what {
    grid-area: what;
}

.toWho {
    grid-area: toWho;
}

.paper {
    display: grid;
    grid-template-columns: 1fr 40px 200px 200px 40px 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas:
    ". logo title title server ."
    ". . . . server ."
    ". who who who who ."
    ". toWho toWho toWho toWho ."
    ". what what what what .";
}

<body>
    <div class="paper">
        <div class="server">server</div>
        <div class="title">titleText</div>
        <div class="logo">logo</div>
        <div class="who">who</div>
        <div class="what">what</div>
        <div class="toWho">toWho</div>
    </div>
</body>

ohh i see now what you mean . That makes sense indeed. So how about if i want the same icon on the line bellow but not connected ? Do i need to create a new class for it ? — Miguel, Jul 14 '20 at 20:08
Probably yes. Because `server` is being used in the first row. If it is to be used in other rows, and it is referring to itself (like in my code, it is referring to itself but just added one more rowspan), then it is crashing the grid (You only have only `server` instance in your DOM). — Panwen Wang, Jul 14 '20 at 20:25

CSS grid placing all items in the top right corner

1 Answers1