Arranging elements in columns using CSS grid side by side

Question

Arranging elements in columns using CSS grid side by side

I'm struggling to grasp the concept of CSS grid.

I'm looking to have 3 columns next to each other with specific width and height, but there seems to be a gap between them.

.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>

How can I remove this gap? And if someone could teach me how to simplify the CSS code, I'd appreciate it. Thanks!

EDIT

I managed to solve it like this

.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>

Now I want to make all of this responsive

html css grid

Answer 1

Answer №1

Ensure that your grid parent has a specified width, and remove any fixed widths set on the child elements. When using

grid-template-columns: 1fr 1fr 1fr;

, each column will automatically take up one-third of the parent's width. For example, if the parent is set to 80vw (80% of the viewport width), then each column will occupy a third of that width.

If you have a different number of items with each set to 1fr, the percentage of width they occupy will vary, such as 25% for 4 items or 20% for 5 items. In general, it can be calculated as 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>
</der>

Check out this example showcasing how to vertically center text by utilizing flex-direction with the value set as 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">Vertical text alignment using flex.
    <br><br> By setting the justify content property when the parent's flex-direction is configured as column, you can easily achieve vertical text alignment.</div>
</div>

Answer 2

Ensure that your grid parent has a specified width, and remove any fixed widths set on the child elements. When using

grid-template-columns: 1fr 1fr 1fr;

, each column will automatically take up one-third of the parent's width. For example, if the parent is set to 80vw (80% of the viewport width), then each column will occupy a third of that width.

If you have a different number of items with each set to 1fr, the percentage of width they occupy will vary, such as 25% for 4 items or 20% for 5 items. In general, it can be calculated as 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>
</der>

Check out this example showcasing how to vertically center text by utilizing flex-direction with the value set as 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">Vertical text alignment using flex.
    <br><br> By setting the justify content property when the parent's flex-direction is configured as column, you can easily achieve vertical text alignment.</div>
</div>

Answer 3

Answer №2

To set specific widths for columns in a grid layout without visible gaps between them, you can use the grid-template-columns property.

If you wish to add red borders to certain divs, you can create a shared class for these elements and apply the styling 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>

Answer 4

To set specific widths for columns in a grid layout without visible gaps between them, you can use the grid-template-columns property.

If you wish to add red borders to certain divs, you can create a shared class for these elements and apply the styling 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>

Arranging elements in columns using CSS grid side by side

Answer №1

Answer №2

Similar questions

How do I connect the HTML file with a JS library that I have installed in WebStorm?

Steps to capture cell click events in a Kendo grid

Issue: Troubile in fetching CSS file from CDN and using local copy as fallback, What is the solution?

Sticky mobile UI elements in Kendo

Ways to adjust dimensions depending on zoom level or screen size

Most effective method for adjusting image size to match div container (as background)

Transform a cropped portrait image into a resized landscape cover using CSS

Generate a hyperlink that launches the correct mapping application on all devices, providing directions to the desired destination

Hop over to another page within the same blog on Blogger with a smooth scrolling feature and automatic redirection

The transition effect of changing opacity from 0 to 1 is not functioning properly in Firefox

Field for Entering Time

Assign a distinct color to each character of the Russian alphabet within a specified text using CSS and/or JavaScript

A guide to creating a personalized horizontal dashed separator in Material UI

Multi-select buttons using Bootstrap

Tips for constraining elements to set heights according to content in "stepped" increments

Is there any custom fullpagejs code available to implement unique transitions while scrolling through sections?

How to use JavaScript to create a spinning wheel that stops automatically at the center of a randomly selected slice

Utilizing a CSS/HTML div grid to mirror a 2D array in JavaScript

Changing text size on the fly with CSS

How can I retrieve the image location post redirect when CORS is enabled?