CODEWITHSUNDEEP
htmlcssgrid
marco95OP
marco95OP

Reputation: 25

Columns side by side with css grid

I am having a problem understanding how CSS grid works.

I want 3 columns side by side with a specific width and height, but there's a gap between each columns.

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  grid-column-gap: 0px;
}

.left {
  grid-column: 1;
  border: 1px solid red;
  height: 500px;
  width: 300px;
}

.middle {
  grid-column: 2;
  border: 1px solid red;
  height: 500px;
  width: 300px;
}

.right {
  grid-column: 3;
  border: 1px solid red;
  height: 500px;
  width: 300px;
}
<div class="grid-container">
  <div class="left">1</div>
  <div class="middle">2</div>
  <div class="right">3</div>
</div>

In which way I can put away this gap? And if anyone can explain me how to reduce the line of code in css I would be grateful, thanks!

EDIT

I solved in this way

.wrapper{
    display: grid;
    place-items: center;
    min-height: 100vh;
}

.grid-container{
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    width: 60vw;
    height: 450px;
}



.left{
    background-color: hsl(31, 77%, 52%);
    grid-column: 1;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.middle{
    background-color: hsl(184, 100%, 22%);
    grid-column: 2;
}

.right{
    background-color: hsl(179, 100%, 13%);
    grid-column: 3;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
<div class="wrapper">

  <div class="grid-container">
      <div class="left">
        <img src="images/icon-sedans.svg" alt="sedans" class="logo">
          <h2 class="text-title">Sedans</h2>
            <div class="main-text">
              Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city 
              or on your next road trip.
            </div>
          <button class="btn">Learn More</button>
      </div>

      <div class="middle">
        <img src="images/icon-suvs.svg" alt="sedans" class="logo">
          <h2 class="text-title">Suvs</h2>
            <div class="main-text">
              Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation 
              and off-road adventures.
            </div>
          <button class="btn">Learn More</button>
      </div>

      <div class="right">
        <img src="images/icon-luxury.svg" alt="sedans" class="logo">
          <h2 class="text-title">Luxury</h2>
            <div class="main-text">
              Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury 
              rental and arrive in style.
            </div>
          <button class="btn">Learn More</button>
      </div>
    </div>
  </div>

But now what I want to do is to make all of this to be responsive

Upvotes: 2

Views: 11060

Answers (2)

dale landry
dale landry

Reputation: 8610

Specify your width on your grid parent, remove any static width on your child elements. With the fraction set in grid-template-columns: 1fr 1fr 1fr; each column will take up a third of the parents width. So if your parent is set to say 80 view width => 80% of the view port, then your columns will spread out over a third of that width each.

If you have had 4 items each set to 1fr, then they would take up 25%, 5 would take up 20%, basically => number of children elements/parents width.

.grid-container {
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  grid-column-gap: 0;
  width: 80vw;
}

.left>ul {
  height: 80%;
  background: pink;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: space-between;
}

.left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid red;
  grid-column: 1;
}

.middle {
  padding: 5px;
  grid-column: 2;
  border: red solid 1px;
}

.middle span {
  display: flex;
  flex-direction: column;
  justify-content: start;
  padding: 5px;
  grid-column: 2;
  background: lightblue;
  border-bottom: 1px solid black;
}

.right {
  grid-column: 3;
  border: 1px solid red;
  padding: .2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.row {
  padding: 0 1rem;
  display: flex;
  justify-content: space-between;
  align-items: start;
  background: #EEE;
}

.right div:nth-of-type(2) {
  color: #a2a2a2;
  text-align: center;
}
<div class="grid-container">
  <div class="left">Here is some content for column 1 with list items
    <ul>
      <li>
        display: flex
      </li>
      <li>
        flex-direction: column
      </li>
      <li>
        justify-content: space-around
      </li>
      <li>
        align-items: flex-start
      </li>
    </ul>
  </div>
  <div class="middle">
    <span>This is inside a span tag</span>
    <span>Parent has flex direction of column</span>
    <span>Justify Content set at start</span>
    <span>this is inside a span tag</span> More content for column 2. it is a bit longer than the first textual content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum viverra pulvinar tincidunt. Nam consequat metus et cursus auctor.
    Suspendisse posuere sem ut tortor lacinia, nec tempor turpis ultrices. Sed vitae gravida orci.</div>
  <div class="right">
    <div class="row">
      <h3>Row</h3>
      <h3>Space</h3>
      <h3>Between</h3>
    </div>
    <span>Parents flex <span style="background: pink;">flex-direction </span> and <span style="background: pink;">display-flex</span> <b>flex</b> and <b>column</b></span></span>
    <span>Parents flex <span style="background: pink;">justify-content</span> is set to <b>space-around</b></span>
    <div>Good ole text-align: center... Vestibulum viverra pulvinar tincidunt. Nam consequat metus et cursus auctor. Suspendisse posuere sem ut tortor lacinia, nec tempor turpis ultrices.
    </div>
  </div>
</div>

Example of vertically centering text with flex-direction set to column.

body {
  margin: 0;
  padding: 0;
}

.parent {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
}

.child {
  margin: 0 auto;
  height: 200px;
  width: calc(200px - 1rem);
  background: lightblue;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: .5rem;
}
<div class="parent">
  <div class="child">Vertically centering using flex.
    <br><br> Justify content when parents flex-direction is set to column, will center content vertically.</div>
</div>

Upvotes: 2

Vincent Ramdhanie
Vincent Ramdhanie

Reputation: 103135

You can simply specify the widths that you need in the grid-template-columns property. There is no gap visible between columns.

If you want the red borders you can specify a common class for those divs and just do it once.

.grid-container{
    display: grid;
    grid-template-columns: 300px 300px 300px;
    grid-template-rows: 1fr;
    column-gap: 0;
    height: 500px;
}
.left{
    border: 1px solid red;  
}

.middle{
    border: 1px solid red;
}
.right{
    border: 1px solid red;
}
<div class="grid-container">
    <div class="left">1</div>
    <div class="middle">2</div>
    <div class="right">3</div>
  </div>

Upvotes: 1

Related Questions