Aligning grid columns

1
votes

I am trying to create a blog template. section#header is made using flexbox. section.main is made with css grid.

The issue is with div.most-read (I've changed it's bg to red). I was expecting it to be 20px(grid-gap) under div.ad, however, it appeared just below the expected place. What is wrong? Any ideas to overall code improvement? P.S. can't post due to the lack of words, so Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, saepe.

See the code below:

:root {
  --light-dark: #333;
  --dark: #303030;
  --grey: #ccc;
  --main-bg: #ededed;
  --section-bg: #e2e2e2;
}

* {
  margin: 0;
  padding: 0;
  font-family: 'Arimo', sans-serif;
}

a {
  text-decoration: none !important;
}

body {
  background-color: var(--main-bg);
}

ul {
  list-style: none;
  display: flex;
}

header {
  width: 80%;
  height: 5em;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav a {
  font-size: 1.5em;
  color: var(--light-dark);
}

.nav li {
  padding-right: 1em;
}

.nav li:last-child {
  padding-right: 0;
}

.tags {
  width: 100%;
  height: 4em;
  background-color: var(--dark);
}

.tags ul {
  width: 80%;
  height: 100%;
  background-color: var(--dark);
  margin: 0 auto;
  padding: 0;
  align-items: center;
}

.tags li {
  padding-right: 10px;
}

.tags a {
  font-size: 1.2em;
  padding: 2px 0;
  color: var(--grey);
}

.tags a:hover {
  transition: .1s;
  border-top: 2px solid var(--grey);
  border-bottom: 2px solid var(--grey);
}

#main {
  width: 80%;
  margin: 1em auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
}

#main>* {
  background-color: var(--section-bg);
}

.latest {
  height: 80em;
  grid-column: 1 /4;
}

.ad {
  height: 25em;
  grid-column: 4 / 5;
}

.most-read {
  height: 55em;
  grid-column: 4 / 5;
  background-color: red !important;
}
<!--Header-->
<section id="header">
  <header>
    <h1>Blog</h1>
    <ul class="nav">
      <li><a href="#">anchor</a></li>
      <li><a href="#">anchor</a></li>
      <li><a href="#">anchor</a></li>
    </ul>
  </header>
  <div class="tags">
    <ul>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
    </ul>
  </div>
</section>
<!--Main-->
<section id="main">
  <div class="latest">
  </div>
  <div class="ad"></div>
  <div class="most-read"></div>
</section>
2
htmlcsscss-grid

2 Answers

1
votes

grid is drawn rows by rows and columns by columns, to allow .most-read to climb up, you actually need .latest to span across at least 2 rows to include 2 elements aside (2 rows).

you can add : grid-row: 1 / span 2; or grid-row: auto / span 2; to .latest

:root{
  --light-dark:#333;
  --dark: #303030;
  --grey: #ccc;
  --main-bg: #ededed;
  --section-bg: #e2e2e2;
}
*{
  margin: 0;
  padding: 0;
  font-family: 'Arimo', sans-serif;
}
a{
  text-decoration: none !important;
}
body{
  background-color: var(--main-bg);
}
ul{
  list-style: none;
  display: flex;
}
header{
  width: 80%;
  height: 5em;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav a{
  font-size: 1.5em;
  color: var(--light-dark);
}
.nav li{
    padding-right: 1em;
}
.nav li:last-child{
  padding-right: 0;
}
.tags{
  width: 100%;
  height: 4em;
  background-color: var(--dark);
}
.tags ul{
  width: 80%;
  height: 100%;
  background-color: var(--dark);
  margin: 0 auto;
  padding: 0;
  align-items: center;
}
.tags li{
  padding-right: 10px;
}
.tags a{
  font-size: 1.2em;
  padding: 2px 0;
  color: var(--grey);
}
.tags a:hover{
  transition: .1s;
  border-top: 2px solid var(--grey);
  border-bottom: 2px solid var(--grey);
}
#main{
  width: 80%;
  margin: 1em auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
}
#main > *{
  background-color: var(--section-bg);
}
.latest{
  height: 80em;
  grid-column: 1 /4;
  grid-row: 1 / span 2;
}
.ad{
  height: 25em;
  grid-column: 4 / 5;
}
.most-read{
  height: 55em;
  grid-column: 4 / 5;
  background-color: red !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!--CSS-->
  <link rel="stylesheet" href="/style.css">
  <!--Google Fonts-->
  <link href="https://fonts.googleapis.com/css?family=Arimo" rel="stylesheet">
  <title>Document</title>
</head>
<body>
  <!--Header-->
  <section id="header">
    <header>
      <h1>Blog</h1>
      <ul class="nav">
        <li><a href="#">anchor</a></li>
        <li><a href="#">anchor</a></li>
        <li><a href="#">anchor</a></li>
      </ul>
    </header>
  <div class="tags">
    <ul>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
    </ul>
  </div>
</section>
<!--Main-->
<section id="main">
  <div class="latest">
  </div>
  <div class="ad"></div>
  <div class="most-read"></div>
</section>
</body>
</html>

An easy reminder about grid https://css-tricks.com/snippets/css/complete-guide-grid/

0
votes

You're overlooking one of the great benefits of CSS Grid: the width and height of grid items can be defined at the container level. You don't need to set heights at the item level (like with flexbox).

Your tallest item is set to 80em. In another column, one item is set to 25em, and the other to 55em.

So create a grid with 20 rows of 5em height each. Then set your grid areas.

It will look like this:

enter image description here

(Visualization using Firefox overlay tool.)

Here's the adjusted CSS:

#main {
  width: 80%;
  margin: 1em auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(20, 5em); /* new */
  grid-gap: 20px;
}
.latest {
  /* height: 80em; */
  grid-row: 1 / 21;      /* new */
  grid-column: 1 / 4;
}
.ad{
  /* height: 25em; */
  grid-row: 1 / 6;       /* new */
  grid-column: 4 / 5;
}
.most-read{
  /* height: 55em; */
  grid-row: 6 / 21;      /* new */
  grid-column: 4 / 5;
  background-color: red !important;
}

jsFiddle demo

:root{
  --light-dark:#333;
  --dark: #303030;
  --grey: #ccc;
  --main-bg: #ededed;
  --section-bg: #e2e2e2;
}
*{
  margin: 0;
  padding: 0;
  font-family: 'Arimo', sans-serif;
}
a{
  text-decoration: none !important;
}
body{
  background-color: var(--main-bg);
}
ul{
  list-style: none;
  display: flex;
}
header{
  width: 80%;
  height: 5em;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav a{
  font-size: 1.5em;
  color: var(--light-dark);
}
.nav li{
    padding-right: 1em;
}
.nav li:last-child{
  padding-right: 0;
}
.tags{
  width: 100%;
  height: 4em;
  background-color: var(--dark);
}
.tags ul{
  width: 80%;
  height: 100%;
  background-color: var(--dark);
  margin: 0 auto;
  padding: 0;
  align-items: center;
}
.tags li{
  padding-right: 10px;
}
.tags a{
  font-size: 1.2em;
  padding: 2px 0;
  color: var(--grey);
}
.tags a:hover{
  transition: .1s;
  border-top: 2px solid var(--grey);
  border-bottom: 2px solid var(--grey);
}
#main{
  width: 80%;
  margin: 1em auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(20, 5em); /* new */
  grid-gap: 20px;
}
#main > * {
  background-color: var(--section-bg);
}
.latest {
  /* height: 80em; */
  grid-row: 1 / 21;
  grid-column: 1 / 4;
}
.ad{
  /* height: 25em; */
  grid-row: 1 / 6;
  grid-column: 4 / 5;
}
.most-read{
  /* height: 55em; */
  grid-row: 6 / 21;
  grid-column: 4 / 5;
  background-color: red !important;
}
<section id="header">
    <header>
      <h1>Blog</h1>
      <ul class="nav">
        <li><a href="#">anchor</a></li>
        <li><a href="#">anchor</a></li>
        <li><a href="#">anchor</a></li>
      </ul>
    </header>
  <div class="tags">
    <ul>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
    </ul>
  </div>
</section>
<!--Main-->
<section id="main">
  <div class="latest">
  </div>
  <div class="ad"></div>
  <div class="most-read"></div>
</section>