Saturday

CSS Grid adds unexpected offset

Issue

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>

Solution

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>

Answered By - Temani Afif

This Answer collected from stackoverflow and tested by AngularFix community admins, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Saturday

CSS Grid adds unexpected offset

Issue

Solution

0 comments:

Post a Comment

Popular Posts

Labels