Home > database >  Grid CSS Layout
Grid CSS Layout

Time：11-09

I created a grid layout with 6 divs. If i write text in first div, it expands depending on the text, and so does all the divs in the row. But is it possible to do something so that only 1 div in a row expands, while others do not?

.grid_body {
   display: grid;
   grid-template-columns: repeat(3,1fr);
   grid-column-gap: 17.5px;
   grid-auto-rows: minmax(400px, auto );
   grid-row-gap: 35px;
   position: absolute;
   top: 100px;
   left: 17.5px;
}

.grid_item {
   width: 300px;
   background-color: white;
   border: 5px solid rgb( 5, 214, 73, 1 );
}

.grid_item img {
   margin: 10px;
}

.grid_item a {
   text-decoration: none;
   color: black;
}

.grid_item a:hover {
   text-decoration: underline;
}

.grid_item p {
   text-align: justify;
   margin: 10px;
}
<div class="grid_body">
  <div class="grid_item"><a href="#"><img src="../img/img1.jpg"></a><a href="#"><p>Quis autem vel eum iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti.
  iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequnt, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti.
  iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequint, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti.
  iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequii </p></a>
 </div>
  <div class="grid_item"><a href="#"><img src="../img/img2.jpg"></a><a href="#"><p>Quis autem vel eum iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti.</p></a>
</div>
  <div class="grid_item"><a href="#"><img src="../img/img3.jpg"></a><a href="#"><p>Quis autem vel eum iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti.</p></a>
</div>
<div class="grid_item"><a href="#"><img src="../img/img1.jpg"></a><a href="#"><p>Quis autem vel eum iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p></a>
</div>
  <div class="grid_item"><a href="#"><img src="../img/img2.jpg"></a><a href="#"><p>Quis autem vel eum iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p></a>
</div>
  <div class="grid_item"><a href="#"><img src="../img/img3.jpg"></a><a href="#"><p>Quis autem vel eum iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p></a>
  </div>
  <div class="grid_item"><a href="#"><img src="../img/img3.jpg"></a><a href="#"><p>Quis autem vel eum iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p></a>
  </div>
  <div class="grid_item"><a href="#"><img src="../img/img3.jpg"></a><a href="#"><p>Quis autem vel eum iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p></a>
  </div>
  <div class="grid_item"><a href="#"><img src="../img/img3.jpg"></a><a href="#"><p>Quis autem vel eum iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p></a>
  </div>
 </div>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

.grid_body {
   display: grid;
   grid-template-columns: repeat(3,1fr);
   grid-column-gap: 17.5px;
   grid-auto-rows: minmax(400px, auto );
   grid-row-gap: 35px;
   position: absolute;
   top: 100px;
   left: 17.5px;
   width:20px;
   word-wrap:break-word;
   border:thin black solid;
}

.grid_item {
   width: 300px;
   background-color: white;
   border: 5px solid rgb( 5, 214, 73, 1 );
}

.grid_item img {
   margin: 10px;
}

.grid_item a {
   text-decoration: none;
   color: black;
}

.grid_item a:hover {
   text-decoration: underline;
}

.grid_item p {
   text-align: justify;
   margin: 10px;
}
<div class="grid_body">
  <div class="grid_item"><a href="#"><img src="../img/img1.jpg"></a><a href="#"><p>(bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb)Quis autem vel eum iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti.
  iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequnt, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti.
  iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequint, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti.
  iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequii </p></a>
 </div>
  <div class="grid_item"><a href="#"><img src="../img/img2.jpg"></a><a href="#"><p>Quis autem vel eum iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti.</p></a>
</div>
  <div class="grid_item"><a href="#"><img src="../img/img3.jpg"></a><a href="#"><p>Quis autem vel eum iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti.</p></a>
</div>
<div class="grid_item"><a href="#"><img src="../img/img1.jpg"></a><a href="#"><p>Quis autem vel eum iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p></a>
</div>
  <div class="grid_item"><a href="#"><img src="../img/img2.jpg"></a><a href="#"><p>Quis autem vel eum iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p></a>
</div>
  <div class="grid_item"><a href="#"><img src="../img/img3.jpg"></a><a href="#"><p>Quis autem vel eum iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p></a>
  </div>
  <div class="grid_item"><a href="#"><img src="../img/img3.jpg"></a><a href="#"><p>Quis autem vel eum iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p></a>
  </div>
  <div class="grid_item"><a href="#"><img src="../img/img3.jpg"></a><a href="#"><p>Quis autem vel eum iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus? Ut enim ad minima veniam, qherahdkfbhsdjsgdkrygfbvasjvbgfhvbjhvbhsbhfkbvjuis nostrum exercitationem ullam corporis suscipit laboriosam, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p></a>
  </div>
  <div class="grid_item"><a href="#"><img src="../img/img3.jpg"></a><a href="#"><p>Quis autem vel eum iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p></a>
  </div>
 </div>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

If i understand your problem os this is .....

In first i put extra code foe example....

CodePudding user response：

Just add align-items: start; to the grid container. Remember a row still stays a row, so this will give you "holes" in your layout.

If you need a masonry type of layout, you will be able to work with grid-template-rows: masonry; in the future. As of now, Firefox is the only browser supporting this behind a flag.

.grid_body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 17.5px;
  grid-auto-rows: minmax(400px, auto);
  row-gap: 35px;
  position: absolute;
  top: 100px;
  left: 17.5px;
  align-items: start;
}

.grid_item {
  width: 300px;
  background-color: white;
  border: 5px solid rgb( 5, 214, 73, 1);
}

.grid_item img {
  margin: 10px;
}

.grid_item a {
  text-decoration: none;
  color: black;
}

.grid_item a:hover {
  text-decoration: underline;
}

.grid_item p {
  text-align: justify;
  margin: 10px;
}
<div class="grid_body">
  <div class="grid_item">
    <a href="#"><img src="../img/img1.jpg"></a>
    <a href="#">
      <p>Quis autem vel eum iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et
        harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti. iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem
        sequnt, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti. iure reprehenderit, quia voluptas sit,
        aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequint, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et harum quidem rerum facilis est et expedita distinctio, qui blanditiis
        praesentium voluptatum deleniti atque corrupti. iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequii </p>
    </a>
  </div>
  <div class="grid_item">
    <a href="#"><img src="../img/img2.jpg"></a>
    <a href="#">
      <p>Quis autem vel eum iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et
        harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti.</p>
    </a>
  </div>
  <div class="grid_item">
    <a href="#"><img src="../img/img3.jpg"></a>
    <a href="#">
      <p>Quis autem vel eum iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et
        harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti.</p>
    </a>
  </div>
  <div class="grid_item">
    <a href="#"><img src="../img/img1.jpg"></a>
    <a href="#">
      <p>Quis autem vel eum iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et
        harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus? Ut enim
        ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p>
    </a>
  </div>
  <div class="grid_item">
    <a href="#"><img src="../img/img2.jpg"></a>
    <a href="#">
      <p>Quis autem vel eum iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et
        harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus? Ut enim
        ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p>
    </a>
  </div>
  <div class="grid_item">
    <a href="#"><img src="../img/img3.jpg"></a>
    <a href="#">
      <p>Quis autem vel eum iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et
        harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus? Ut enim
        ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p>
    </a>
  </div>
  <div class="grid_item">
    <a href="#"><img src="../img/img3.jpg"></a>
    <a href="#">
      <p>Quis autem vel eum iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et
        harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus? Ut enim
        ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p>
    </a>
  </div>
  <div class="grid_item">
    <a href="#"><img src="../img/img3.jpg"></a>
    <a href="#">
      <p>Quis autem vel eum iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et
        harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus? Ut enim
        ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p>
    </a>
  </div>
  <div class="grid_item">
    <a href="#"><img src="../img/img3.jpg"></a>
    <a href="#">
      <p>Quis autem vel eum iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et
        harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus? Ut enim
        ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p>
    </a>
  </div>
</div>
<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Page link：https//www.codepudding.com/database/184510.html

Prev:CSS: Move Icon Closer to Overflowed Text
Next:How do I display multiple constants in html?
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding