Форум

Black_Star · #1 (**permalink**) 07.01.2019, 20:09

Добрый день уважаемые. Начал осваивать грид систему CSS столкнулся с таким непонимание

<!DOCTYPE html>
<html>
<head>
	<title>Test</title>
	<style>
		.page_blog {
  position: relative;
  width: 100%;
}

.blog_list {
  display: grid;
  grid-template-columns: repeat(4, minmax(200px, 1fr));
  grid-gap: 25px;
  grid-auto-rows: 20px;
  box-sizing: border-box;
  padding: 20px;
}

.blog_list__item {
  display: block;
  width: 100%;
  background-color: $bg_colorItem;
}

///// Blog Post
.blog_post {
  position: relative;
  width: 100%;
}

.blog_images {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 300px;
  text-align: center;
}

.blog_images__img {
  object-fit: contain;
  display: block;
  width: 100%;
}

.blog_post__inner {
  padding: 20px;
  background-color: #fff;
}

.blog_post__title {
  font-size: 18px;
  line-height: 26px;
}

.blog_post__text {
  color: $color_text1;
  font-size: 15px;
  font-weight: 300;
  line-height: 22px;
}

.buttons_group {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 10px;
  border-top: 1px solid #555;
}

.post_watchComments {
  position: relative;
  display: inline-block;
  padding-left: 18px;
  color: #9a9a9a;
  font-size: 14px;
  line-height: 22px;
}

.post_ratingPost {
  position: relative;
  width: 40px;
  height: 22px;
  line-height: 22px;
  text-align: center;
}

.post_time {
  position: relative;
  display: inline-block;
  padding-left: 18px;
  color: #9a9a9a;
  font-size: 14px;
  line-height: 22px;
}

.blog_quate {
  background-color: #2B2B2B;
  color: #fff;
}

.blog_quate__inner {
  position: relative;
  margin: 0;
  padding: 20px;
  text-indent: 30px;
  font-size: 20px;
}

.blog_quate__autor {
  text-align: right;
  margin-top: 16px;
}

.blog_list__link {
  display: block;
}

.blog_list__figure {
  margin: 0;
}

.blog_list__img {
  display: block;
  margin: 0 auto;
  text-align: center;
}

.blog_list__desc {
  text-align: center;
  margin: 6px 0;
}

	</style>
</head>
<body>
<div class="page_blog">
  <ul class="blog_list">
    <li class="blog_list__item">


      <article class="blog_post">
        <div class="blog_images">
          <img class="blog_images__img" src="https://via.placeholder.com/294x230" alt="images1">
          <img class="blog_images__img" src="https://via.placeholder.com/294x230" alt="images2">
        </div>
        <div class="blog_post__inner">
          <h2 class="blog_post__title">Title2</h2>
          <p class="blog_post__text">A man who works with his hands is a laborer; a man who works with his hand s and his brain is a craftsman; but a man who works with his hands and his brain and his heart is an artist...
          </p>
          <div class="buttons_group">
            <span class="post_watchComments">3 comments</span>
            <span class="post_ratingPost">4.7</span>
            <time class="post_time" datetime="2011-11">November, 2011</time>
          </div>
        </div>
      </article>


    </li>

    <li class="blog_list__item">
      <div class="blog_quate">
        <blockquote class="blog_quate__inner" cite="autorName">
          <p>If I die even tomorrow, I don't care. I managed to do absolutely everything</p>

          <p class="blog_quate__autor">Freddie Mercury<span>"Queen"</span></p>
        </blockquote>
      </div>
    </li>

    <li class="blog_list__item">
      <a class="blog_list__link" href="#">
        <figure class="blog_list__figure">
          <img class="blog_list__img" src="https://via.placeholder.com/300x430" alt="images" />
          <figcaption class="blog_list__desc">Rock Booze</figcaption>
        </figure>
      </a>
    </li>


    <li class="blog_list__item">
      <article class="blog_post">
        <img class="blog_images__img" src="https://via.placeholder.com/294x230" alt="images1">
        <div class="blog_post__inner">
          <h2 class="blog_post__title">Title3</h2>
          <p class="blog_post__text">A man who works with his hands is a laborer; a man who works with his hand s and his brain is a craftsman; but a Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus nulla omnis optio pariatur, quibusdam saepe! Lorem ipsum dolor
            sit amet, consectetur adipisicing elit. Iste, soluta!</p>
          <div class="buttons_group">
            <span class="post_watchComments">3 comments</span>
            <span class="post_ratingPost">4.7</span>
            <time class="post_time" datetime="2011-11">November, 2011</time>
          </div>
        </div>
      </article>
    </li>


    <li class="blog_list__item">
      <div class="blog_quate">
        <blockquote class="blog_quate__inner" cite="autorName">
          <p>If I die even tomorrow, I don't care. I managed to do absolutely everything</p>

          <p class="blog_quate__autor">Freddie Mercury<span>"Queen"</span></p>
        </blockquote>
      </div>
    </li>

    <li class="blog_list__item">
      <article class="blog_post">
        <img class="blog_images__img" src="https://via.placeholder.com/294x230" alt="images1">
        <div class="blog_post__inner">
          <h2 class="blog_post__title">Title3</h2>
          <p class="blog_post__text">A man who works with his hands is a laborer; a man who works with his hand s and his brain is a craftsman; but a Lorem ipsum dolor sit amet, consectonsetur adipisicing elit. Ducimus nulla omnis optio pariatur, quibusdam saepe! Lorem ipsum dolor
            sit amet, consectetur adipisicing elit. Iste, soluta!</p>
          <div class="butt_group">
            <span class="post_watchComments">3 comments</span>
            <span class="post_ratingPost">4.7</span>
            <time class="post_time" datetime="2011-11">November, 2011</time>
          </div>
        </div>
      </article>
    </li>


    <li class="blog_list__item">
      <article class="blog_post">
        <div class="blog_images">
          <img class="blog_images__img" src="https://via.placeholder.com/294x230" alt="images1">
          <img class="blog_images__img" src="https://via.placeholder.com/294x230" alt="images2">
        </div>
        <div class="blog_post__inner">
          <h2 class="blog_post__title">Title2</h2>
          <p class="blog_post__text">A man who works with his hands is a laborer; a man who works with his hand s and his brain is a craftsman; but a man who works with his hands and his brain and his heart is an artist...
          </p>
          <div class="buttons_group">
            <span class="post_watchComments">3 comments</span>
            <span class="post_ratingPost">4.7</span>
            <time class="post_time" datetime="2011-11">November, 2011</time>
          </div>
        </div>
      </article>
    </li>
  </ul>
</div>
</body>
</html>

Почему элементы после 4-го, наслаиваются на верхние элементы, как этого избежать ?
(Без фиксирование высоты элемента), необходимо что б пятый элемент занимал место под первым на расстоянии 20рх сверху?

Пытаюсь сделать верстку для блога, где нету привязанности к длине стати

Hovik · #2 (**permalink**) 09.01.2019, 00:24

grid-template-columns: repeat(4, minmax(200px, 1fr));
что означает 1fr, это жадность, а не 25%,
width:100%;
grid-template-columns: repeat(4, minmax(200px, 25%));

Malleys · #3 (**permalink**) 13.01.2019, 11:25

Сообщение от Black_Star

Почему элементы после 4-го, наслаиваются на верхние элементы, как этого избежать ?

У вас в 15 строчке написано grid-auto-rows: 20px;, это значит ряды сетки формируются в зависимости от кол-ва элементов и высота ряда сетки 20px. У ваших элементов высота больше, чем 20px, и они соответственно не вмещаются в ячейку. Удалите это объявление, и высота ряда сетки будет автоматически вычисляться по самому высокому элементу в ряду.

Стоит учитывать, что расположение элементов зависит от сетки, а не сетка зависит от расположения элементов.

А так ваша задача может быть решена при помощи такого кода.

.blog_list {
	column-count: 4;
	column-gap: 25px;
}

.blog_list__item {
	break-inside: avoid;
	overflow: auto;
	margin-bottom: 25px;
}

замените с 11 по 24 строчки на эти.

Сообщение от Hovik

grid-template-columns: repeat(4, minmax(200px, 1fr));
что означает 1fr, это жадность, а не 25%,
width:100%;
grid-template-columns: repeat(4, minmax(200px, 25%));

Единица измерения fr представляет суммарную часть оставшегося пространства в сеточном контейнере.

например, repeat(4, minmax(200px, 1fr)), здесь 1fr повторяется 4 раза, соответственно 4fr это максимальный размер контейнера. И если он на самом деле равен 100%, то в данном случае 1fr равен 25%.

например, 1fr 2fr 3fr, здесь сумма равна 6fr, соответственно 1fr равен одной шестой размера контейнера.

например, 1fr 10px 2fr, здесь сумма равна 3fr + 10px, соответственно 1fr равен (размер контейнера - 10px) / 3

https://www.w3.org/TR/css-grid-1/#fr-unit

Форум

Справочник

Discord чат

Курсы javascript