CODEWITHSUNDEEP
htmlcssgrid-layoutcss-grid
zac
zac

Reputation: 4918

How to make my two columns responsive?

I am displaying two columns in the center of my grid with contents and I need to make these two columns above each other in mobile view how I can do that? 

.two-pics {
  display: grid;
  grid-gap: 50px;
  grid-template-columns: 400px 400px;
  object-fit: cover;
  color: #444;
  margin-top: 100px;
  justify-content: center;
}

.box {
  background-color: white;
  color: #fff;
  border-radius: 5px;
  font-size: 150%;
}

.a {
  grid-column: 1;
  grid-row: 1 / 12;
}

.b {
  grid-column: 2;
  grid-row: 1 / 12;
}
<div class="two-pics">
  <div class="box a">
    <img src="assets/images/pic1.jpg">
    <br>
    <p>title</p>
    <ul>
      <li></li>
      <li>dfgdfghdfhdfh</li>
      <li>dfgdfghdfhdfh</li>
      <li>dfgdfghdfhdfh</li>
    </ul>
  </div>
  <div class="box b">
    <img src="assets/images/pic2.jpg">
    <br>
    <p>ldkjh ldkjfh ldk hjf</p>
  </div>
</div>

Upvotes: 1

Views: 73

Answers (1)

sol
sol

Reputation: 22959

Using the auto-fit property you can create as many 400px grid tracks as will fit in the container.

codepen

body {
  background: grey;
}

.two-pics {
  display: grid;
  grid-gap: 50px;
  grid-template-columns: repeat(auto-fit, 400px);
  color: #444;
  margin-top: 100px;
  justify-content: center;
}

.box {
  background-color: white;
  color: #000;
  border-radius: 5px;
  font-size: 150%;
}
<div class="two-pics">
  <div class="box a">
    <img src="https://unsplash.it/400">
    <br>
    <p>title</p>
    <ul>
      <li>dfdfd</li>
      <li>dfgdfghdfhdfh</li>
      <li>dfgdfghdfhdfh</li>
      <li>dfgdfghdfhdfh</li>
    </ul>
  </div>
  <div class="box b">
    <img src="https://unsplash.it/400">
    <br>
    <p>ldkjh ldkjfh ldk hjf</p>
  </div>
</div>

Upvotes: 2

Related Questions