Html - CSS Grid adds unexpected offset

AndreiYusupau
January 12, 2024
138 views
0 votes
2 Answers

I’m trying to create a grid layout for a webapp. My expectation was that if I specify grid-column: 1/2 for block with description than it should haw width of 2 columns (1 and 2). But it seems that it still has width of 1 column. How to fix it?

        body {
            width: 1440px;
        }

        .examples-block {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
            grid-row-gap: 44px;
            grid-column-gap: 44px;
            padding: 44px;
        }

        .example-item {
            width: 422px;
            height: 392px;
            background: #D9D9D9;
            border-radius: 24px;
        }

        .example-item-with-right-description {
            display: flex;
            width: 887px;
            height: 392px;
            border-radius: 24px;
            border: 1px solid #000;
            align-items: center;
            justify-content: space-around;
        }

        .example-item-with-left-description {
            display: flex;
            background: #D9D9D9;
            width: 887px;
            height: 392px;
            border-radius: 24px;
            border: 1px solid #000;
            align-items: center;
            justify-content: space-around;
        }

        .example-item-with-inner-dark {
            background: #D9D9D9;
            width: 358px;
            height: 328px;
            border-radius: 16px;
        }

        .example-item-with-inner-light {
            background: #F1F1F1;
            width: 358px;
            height: 328px;
            border-radius: 16px;
        }

        .example-item-description {
            width: 401px;
        }

        .example-item-image-container {
            width: 100%;
            height: 100%;
            width: 212px;
            height: 310px;
            margin: 44px 110px;
        }

        .img-div {
            max-width: 100%;
            max-height: 100%;
            width: 212px;
            height: 310px;
            border-radius: 12px;
            background: red;
        }

        .example-item-image-container-small {
            width: 156px;
            height: 228px;
            margin: 44px 110px;
        }

<!DOCTYPE html>
<html>
<body>
    <main>
        <div class="examples-block" style="height: 1469px;">
            <div class="example-item" style="grid-column: 1; grid-row: 1;">
                <div class="example-item-image-container">
                    <div class="img-div"></div>
                </div>
            </div>
            <div class="example-item" style="grid-column: 2; grid-row: 1;">
                <div class="example-item-image-container">
                    <div class="img-div"></div>
                </div>
            </div>
            <div class="example-item" style="grid-column: 3; grid-row: 1;">
                <div class="example-item-image-container">
                    <div class="img-div"></div>
                </div>
            </div>
            <div class="example-item-with-right-description" style="grid-column: 1/2; grid-row: 2;">
                <div class="example-item-with-inner-dark">
                    <div class="example-item-image-container-small">
                        <div class="img-div"></div>
                    </div>
                </div>
                <div class="example-item-description">
                    <h3>DESCRIPTION</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas efficitur pulvinar lacus, sit amet cursus est tincidunt a.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas efficitur pulvinar lacus, sit amet cursus est tincidunt a.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas efficitur pulvinar lacus, sit amet cursus est tincidunt a.</p>
                </div>
            </div>
            <div class="example-item" style="grid-column: 3; grid-row: 2;">
                <div class="example-item-image-container">
                    <div class="img-div"></div>
                </div>
            </div>
            <div class="example-item" style="grid-column: 1; grid-row: 3;">
                <div class="example-item-image-container">
                    <div class="img-div"></div>
                </div>
            </div>
            <div class="example-item-with-left-description" style="grid-column: 2/3; grid-row: 3;">
                <div class="example-item-with-inner-light">
                    <div class="example-item-image-container-small">
                        <div class="img-div"></div>
                    </div>
                </div>
                <div class="example-item-description">
                    <h3>DESCRIPTION</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas efficitur pulvinar lacus, sit amet cursus est tincidunt a.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas efficitur pulvinar lacus, sit amet cursus est tincidunt a.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas efficitur pulvinar lacus, sit amet cursus est tincidunt a.</p>
                </div>
            </div>
        </div>
    </main>
</body>

</html>

Answers

Don’t define the position of the items. Simply define how big they should be using span x.

In your case, all you need is grid-column: span 2; to the items with description

body {
  width: 1440px;
}

.examples-block {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
  padding: 44px;
}

.example-item {
  width: 422px;
  height: 392px;
  background: #D9D9D9;
  border-radius: 24px;
}

.example-item-with-right-description {
  display: flex;
  grid-column: span 2;
  width: 887px;
  height: 392px;
  border-radius: 24px;
  border: 1px solid #000;
  align-items: center;
  justify-content: space-around;
}

.example-item-with-left-description {
  display: flex;
  grid-column: span 2;
  background: #D9D9D9;
  width: 887px;
  height: 392px;
  border-radius: 24px;
  border: 1px solid #000;
  align-items: center;
  justify-content: space-around;
}

.example-item-with-inner-dark {
  background: #D9D9D9;
  width: 358px;
  height: 328px;
  border-radius: 16px;
}

.example-item-with-inner-light {
  background: #F1F1F1;
  width: 358px;
  height: 328px;
  border-radius: 16px;
}

.example-item-description {
  width: 401px;
}

.example-item-image-container {
  width: 100%;
  height: 100%;
  width: 212px;
  height: 310px;
  margin: 44px 110px;
}

.img-div {
  max-width: 100%;
  max-height: 100%;
  width: 212px;
  height: 310px;
  border-radius: 12px;
  background: red;
}

.example-item-image-container-small {
  width: 156px;
  height: 228px;
  margin: 44px 110px;
}

<!DOCTYPE html>
<html>

<body>
  <main>
    <div class="examples-block" style="height: 1469px;">
      <div class="example-item">
        <div class="example-item-image-container">
          <div class="img-div"></div>
        </div>
      </div>
      <div class="example-item">
        <div class="example-item-image-container">
          <div class="img-div"></div>
        </div>
      </div>
      <div class="example-item">
        <div class="example-item-image-container">
          <div class="img-div"></div>
        </div>
      </div>
      <div class="example-item-with-right-description" >
        <div class="example-item-with-inner-dark">
          <div class="example-item-image-container-small">
            <div class="img-div"></div>
          </div>
        </div>
        <div class="example-item-description">
          <h3>DESCRIPTION</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas efficitur pulvinar lacus, sit amet cursus est tincidunt a.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas efficitur pulvinar lacus, sit amet cursus est tincidunt a.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas efficitur pulvinar lacus, sit amet cursus est tincidunt a.</p>
        </div>
      </div>
      <div class="example-item">
        <div class="example-item-image-container">
          <div class="img-div"></div>
        </div>
      </div>
      <div class="example-item">
        <div class="example-item-image-container">
          <div class="img-div"></div>
        </div>
      </div>
      <div class="example-item-with-left-description" >
        <div class="example-item-with-inner-light">
          <div class="example-item-image-container-small">
            <div class="img-div"></div>
          </div>
        </div>
        <div class="example-item-description">
          <h3>DESCRIPTION</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas efficitur pulvinar lacus, sit amet cursus est tincidunt a.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas efficitur pulvinar lacus, sit amet cursus est tincidunt a.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas efficitur pulvinar lacus, sit amet cursus est tincidunt a.</p>
        </div>
      </div>
    </div>
  </main>
</body>

</html>

- Haishen
- January 12, 2024 at 10:53 am
- 0 votes
0
Have you seen https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid-column?————If there is a named line with the name custom-ident-start/custom-ident-end, it contributes the first such line to the grid item’s placement.

Your custom-ident-end seems wrong (need plus 1, it means the ident colums/ row). Fix the DESCRIPTION block code as below:
```
<div class="example-item-with-right-description" style="grid-column: 1/2; grid-row: 2;">
```
fix to
```
<div class="example-item-with-right-description" style="grid-column: 1/3; grid-row: 2;">
```
```
<div class="example-item-with-left-description" style="grid-column: 2/3; grid-row: 3;">
```
fix to
```
<div class="example-item-with-left-description" style="grid-column: 2/4; grid-row: 3;">
```
Or you can pick the Temani Afif’s answer by using the keyword span.
Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.

Html – CSS Grid adds unexpected offset

Answers