Наслоение грид ячеек
Добрый день уважаемые. Начал осваивать грид систему 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рх сверху? Пытаюсь сделать верстку для блога, где нету привязанности к длине стати |
grid-template-columns: repeat(4, minmax(200px, 1fr));
что означает 1fr, это жадность, а не 25%, width:100%; grid-template-columns: repeat(4, minmax(200px, 25%)); |
Цитата:
Стоит учитывать, что расположение элементов зависит от сетки, а не сетка зависит от расположения элементов. А так ваша задача может быть решена при помощи такого кода. .blog_list { column-count: 4; column-gap: 25px; } .blog_list__item { break-inside: avoid; overflow: auto; margin-bottom: 25px; }замените с 11 по 24 строчки на эти. Цитата:
например, 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 |
Часовой пояс GMT +3, время: 14:42. |