0

How to prevent padding-right from the right column when window resize if use flex with column wrap?

Problem

body {
  background: #f9f9f9;
  color: #465665;

}

a {
  color: #5b7083;
  transition: all .25s ease-in-out;
}

/* The title */
.title {
  font-weight: 700;
}

/* The description */
.desc {
  font-size: 1em;
  font-style: italic;
  font-family: Georgia, serif;
}

/* Text-centering */
.title,
.desc,
.intro {
  text-align: center;
}

/* Intro section */
.intro {
  margin: 1.75em 0 .75em;
  border-bottom: 3px double rgba(0, 0, 0, 0.05);
  margin-bottom: 1.75em;
}

.intro a {
  opacity: .7;
}

.intro a:hover {
  opacity: 1;
}

.intro h3 {
  font-size: .825em;
  font-weight: 700;
  text-transform: uppercase;
  display: inline-block;
  margin: .25em .75em .75em;
}

.intro h3 a {
  font-weight: 400;
}

/* Masonry grid */
.masonry {
  transition: all .5s ease-in-out;
  column-gap: 30px;
  column-fill: initial;
}

/* Masonry item */
.masonry .brick {
  margin-bottom: 30px;
  display: inline-block; /* Fix the misalignment of items */
  vertical-align: top; /* Keep the item on the very top */
}

/* Masonry image effects */
.masonry .brick img {
  transition: all .5s ease-in-out;
  backface-visibility: hidden; /* Remove Image flickering on hover */
}

.masonry .brick:hover img {
  opacity: .75;
}

/* Bordered masonry */
.masonry.bordered {
  column-rule: 1px solid #eee;
  column-gap: 50px;
}

.masonry.bordered .brick {
  padding-bottom: 25px;
  margin-bottom: 25px;
  border-bottom: 1px solid #eee;
}

/* Gutterless masonry */
.masonry.gutterless {
  column-gap: 0;
}

.masonry.gutterless .brick {
  margin-bottom: 0;
}

/* Masonry on tablets */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .masonry {
    column-count: 2;
  }
}

/* Masonry on big screens */
@media only screen and (min-width: 1024px) {
  .desc {
    font-size: 1.25em;
  }

  .intro {
    letter-spacing: 1px;
  }

  .masonry {
    column-count: 2;

  }
}

 .masonry {
     
     border: 1px solid black;
 }
 
  .container {
     
     border: 1px solid black;
 }
<div class="container">

    <div class="wrapper">
<div class="masonry">
  <div class="brick">
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
  </div>
  <div class="brick">
   text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
  <div class="brick">
      text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
  </div>
  <div class="brick">
  text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
  <div class="brick">
  text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>
  <div class="brick">
  text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>
        <div class="brick">
  text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
  <div class="brick">
  text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>
  <div class="brick">
 text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>
</div>
        </div>
</div>

https://jsfiddle.net/jsman82/ve4Ldhc8/

Crocsx
  • 2,534
  • 1
  • 28
  • 50
smallMars
  • 27
  • 5
  • The padding is because the text has not space to be displayed entirely. you can add `word-break: break-all;` if you want the text to never break and go to the end of the space available. Or align center your text, so the padding are uniform `text-align: center;`. – Crocsx Aug 05 '21 at 14:08
  • 1
    This is not a solution to the problem. – smallMars Aug 05 '21 at 14:16
  • Flexbox might be useful. – Amini Aug 05 '21 at 14:17
  • @smallMars how so ? this is the ONLY way. Or you can adapt the div size to the text, but what do you expect ? how can you not cut the word, but fill the space available without filling it with something, or reducing the size ? – Crocsx Aug 05 '21 at 14:18
  • Basically **you can't**. Thats not the way the line box model works. https://stackoverflow.com/questions/37406353/make-container-shrink-to-fit-child-elements-as-they-wrap – Paulie_D Aug 05 '21 at 14:18
  • Alternatively, you can *stretch* the text with `text-align:justfy` but that may not be what you are after. – Paulie_D Aug 05 '21 at 14:32

2 Answers2

1

This is not padding that makes extra space at the right side. It is because the long paragraph will automatically split into a new line when text grows.

If you dont want to break the word to use the available space, you can use text-align: justify; to .masonry .brick. This will not break the word, instead it uses the space in between

body {
  background: #f9f9f9;
  color: #465665;

}

a {
  color: #5b7083;
  transition: all .25s ease-in-out;
}

/* The title */
.title {
  font-weight: 700;
}

/* The description */
.desc {
  font-size: 1em;
  font-style: italic;
  font-family: Georgia, serif;
}

/* Text-centering */
.title,
.desc,
.intro {
  text-align: center;
}

/* Intro section */
.intro {
  margin: 1.75em 0 .75em;
  border-bottom: 3px double rgba(0, 0, 0, 0.05);
  margin-bottom: 1.75em;
}

.intro a {
  opacity: .7;
}

.intro a:hover {
  opacity: 1;
}

.intro h3 {
  font-size: .825em;
  font-weight: 700;
  text-transform: uppercase;
  display: inline-block;
  margin: .25em .75em .75em;
}

.intro h3 a {
  font-weight: 400;
}

/* Masonry grid */
.masonry {
  transition: all .5s ease-in-out;
  column-gap: 30px;
  column-fill: initial;
}

/* Masonry item */
.masonry .brick {
  margin-bottom: 30px;
  display: inline-block;
  /* Fix the misalignment of items */
  vertical-align: top;
  /* Keep the item on the very top */
  text-align: justify;
}

/* Masonry image effects */
.masonry .brick img {
  transition: all .5s ease-in-out;
  backface-visibility: hidden;
  /* Remove Image flickering on hover */
}

.masonry .brick:hover img {
  opacity: .75;
}

/* Bordered masonry */
.masonry.bordered {
  column-rule: 1px solid #eee;
  column-gap: 50px;
}

.masonry.bordered .brick {
  padding-bottom: 25px;
  margin-bottom: 25px;
  border-bottom: 1px solid #eee;
}

/* Gutterless masonry */
.masonry.gutterless {
  column-gap: 0;
}

.masonry.gutterless .brick {
  margin-bottom: 0;
}

/* Masonry on tablets */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .masonry {
    column-count: 2;
  }
}

/* Masonry on big screens */
@media only screen and (min-width: 1024px) {
  .desc {
    font-size: 1.25em;
  }

  .intro {
    letter-spacing: 1px;
  }

  .masonry {
    column-count: 2;

  }
}

.masonry {

  border: 1px solid black;
}

.container {

  border: 1px solid black;
}
<div class="container">
  <div class="wrapper">
    <div class="masonry">
      <div class="brick">
        text text text text text text text text text text text text text text text text text text text text text text
        text text text text text text text text text text text text text text text text text text text text text text
        text text text text text text text text text text text text text text text text text text text text text
      </div>
      <div class="brick">
        text text text text text text text text text text text text text text text text text text text text text text
        text text text text text text text text text text text text text text text text text text text text text text
        text text text text text text text text text text text text text text text text text text text text text text
        text text text text text text text text text text text text text text text text text text text text text text
        text text text text text text text text text text text text text text text text text text text text text text
        text text text text text text text text text</div>
      <div class="brick">
        text text text text text text text text text text text text text text text text text text text text text text
        text text text text text text text text text text text text text text text text text text text text text text
        text text text text text text text text text text text text text text text text text text text text text text
        text text text text text text text text text text
      </div>
      <div class="brick">
        text text text text text text text text text text text text text text text text text text text text text text
        text text text text text text text text text text text text text text text text text text text text text text
        text text text text text text text text text text text text text text text text text text text text</div>
      <div class="brick">
        text text text text text text text text text text text text text text text text text text text text text text
        text text text text text text text text text text text text text text text text text text text text text text
        text text text text text text text text text text </div>
      <div class="brick">
        text text text text text text text text text text text text text text text text text text text text text text
        text text text text text text text text </div>
      <div class="brick">
        text text text text text text text text text text text text text text text text text text text text text text
        text text text text text text text text text text text text text text text text text text text text text text
        text text text text text text text text text text text text text text text</div>
      <div class="brick">
        text text text text text text text text text text text text text text text text text text text text text text
        text text text text text </div>
      <div class="brick">
        text text text text text text text text text text text text text text text text text text text text text text
        text text text text text text text text text text text </div>
    </div>
  </div>
</div>
Nitheesh
  • 19,238
  • 3
  • 22
  • 49
  • This solution is not suitable because the words break on the letters after the wrap. Maybe someone has another variant for layout? – smallMars Aug 05 '21 at 14:28
  • @smallMars If you dont want to break the word to use the available space, you can use `text-align: justify;`. This will not break the word, instead it uses the space in between – Nitheesh Aug 05 '21 at 14:36
  • How to align the bricks from right to right edge, so that there is no indent? – smallMars Aug 05 '21 at 14:36
  • @smallMars What does aligning from right to right edge means? – Nitheesh Aug 05 '21 at 14:37
1

This will work, add this css to .brick class:

.masonry .brick{
 margin-bottom: 30px;
    display: inline-block;
    vertical-align: top;
    text-align: justify;// add this line
}

The text-justify property specifies the justification method of text when text-align is set to "justify".

Nexo
  • 2,125
  • 2
  • 10
  • 20