CODEWITHSUNDEEP
csscss-grid
user14347129
user14347129

Reputation:

Is there a way to create this layout using CSS?

I have two sections: a hero and an about section. There is a container that I am using but for the about section, the image on the left will go outside of the container line, while the content on the right will stay within the container. I have attached a photo of what I am trying to accomplish.

.container {
  max-width: 1280px;
  margin: 0 auto;
}

#about {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.content {
  background-color: #1A969F;
  padding: 2rem 8rem 2rem 3rem;
}
<section id="about">
  <div class="img">
    <img src="about-img.jpg" alt="">
  </div>
  <div class="content">
    <h2>Heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, vitae! Quam, ipsam quidem autem numquam ipsa atque debitis similique pariatur aliquid, quibusdam labore mollitia dolorum temporibus et magni, commodi blanditiis.</p>
  </div>
</section>

enter image description here

Upvotes: 0

Views: 50

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 105893

from comments:

yes, with grid you are missing 2 columns. – G-Cyrillus

So we would use two extra grid columns for the about section? Would we still be able to use the container class for the other sections and navbar? - Webdev1995

i made you an example below of the idea of 2 extra columns (but on the parent ;) ) that #about can span through – G-Cyrillus

extra column shoul be used from .container where you did set the max-width inside the grid via minmax() instead max-width on .container.

here is an idea:

.container {
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr minmax(auto, 1280px) 1fr
}

section {
  grid-column: 2;
  background: #bee
}

#about {
  grid-column: 1 /span 3;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #eee
}

.content {
  background-color: #1A969F;
  padding: 2rem 8rem 2rem 3rem;
}
<div class="container">
  <section>whatever of 1280px max-width</section>
  <section id="about">
    <div class="img">
      <img src="about-img.jpg" alt="about illustration">
    </div>
    <div class="content">
      <h2>Heading</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, vitae! Quam, ipsam quidem autem numquam ipsa atque debitis similique pariatur aliquid, quibusdam labore mollitia dolorum temporibus et magni, commodi blanditiis.</p>
    </div>
  </section>
  <section>whatever of 1280px max-width</section>
</div>

Upvotes: 1

Related Questions