0

Подскажите пожалуйста :-), как сделать так, чтоб верхний длинный блок исчез? Уже промучался с блоками и никак не выходит его убрать. Как пытаюсь его убрать - сразу вся сетка слетает. Увы в сетках пока токо начинающий...((

Сейчас сетка такая:

.wrapper {
  margin: 0 0 20px 0;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(4, 300px); /*размер ячеек*/
  grid-template-rows: repeat(4,180px);/*высота ячеек*/
  justify-content: center;
  align-content: end;
}

.box {    display:block;overflow: hidden;

  background-color: #444;
  color: #fff;
  border:1px solid grey;
  border-radius: 5px;
  font-size: 150%;
}



.item2 {
  grid-column: 1 / 3;
  grid-row: 2 / 4;
}

.item3 {
  grid-column: 1 / 5;
}









.effect-7 {
    position: relative;
    margin-bottom: 30px;
}

.effect-7 .effect-img {
    position: relative;
    font-size: 0;
}

.effect-7 .effect-img img {
    position: relative;
    width: 100%;
    height: auto;
    transform: scale(1.2);
    left: -15px;
    transition: .5s;
}

.effect-7:hover .effect-img img {
    transform: scale(1.2);
    left: 0;
}

.effect-7 .effect-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 30px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    background: rgba(0, 0, 0, .1);
    transition: .5s;
}

.effect-7 .effect-text h2 {
    position: relative;
    color: #ffffff;
    font-size: 20px;
    margin-bottom: 10px;
    padding-bottom: 15px;
}

.effect-7 .effect-text h2::after {
    position: absolute;
    content: "";
    width: 30px;
    height: 3px;
    left: 0;
    bottom: 0;
    background: #ffffff;
    transition: .5s;
}

.effect-7 .effect-text p {
    position: relative;
    color: #ffffff;
    font-size: 15px;
    margin: 0;
    left: calc(-100% - 30px);
    opacity: 0;
    transition: .5s;
}

.effect-7 .effect-text:hover h2::after {
    width: 100%;
}

.effect-7 .effect-text:hover p {
    left: 0;
    opacity: 1;
}
<div class="wrapper">    


      <div class="box item2">
    <div class="effect-7">
<div class="effect-img">
    <img height="240px" src="ijijimgdf/sad/bat.jpg" alt="Team Image">
</div>
<div class="effect-text">
    <h2>This is heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed purus consectetur, interdum felis in, auctor ligula.</p>
</div>
</div>

</div> 
    <div class="box item3"> <div class="effect-7">
<div class="effect-img">
    <img height="240px" src="https://static.onecms.io/wp-content/uploads/sites/20/2020/09/11/nature.jpg" alt="Team Image">
</div>
<div class="effect-text">
    <h2>This is heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed purus consectetur, interdum felis in, auctor ligula.</p>
</div>
</div></div>
    <div class="box item4"><div class="effect-7">
<div class="effect-img">
    <img height="240px" src="ijijimgdf/menu/old.png" alt="Team Image">
</div>
<div class="effect-text">
    <h2>This is heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed purus consectetur, interdum felis in, auctor ligula.</p>
</div>
</div></div>
    <div class="box item5"> <div class="effect-7">
<div class="effect-img">
    <img height="240px" src="ijijfiles/swfcas/fung.jpg" alt="Team Image">
</div>
<div class="effect-text">
    <h2>This is heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed purus consectetur, interdum felis in, auctor ligula.</p>
</div>
</div></div>
  
     <div class="box item6"><div class="effect-7">
<div class="effect-img">
    <img height="240px" src="ijijimgdf/story/med1.jpg" alt="Team Image">
</div>
<div class="effect-text">
    <h2>This is heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed purus consectetur, interdum felis in, auctor ligula.</p>
</div>
</div></div>
    <div class="box item7"><div class="effect-7">
<div class="effect-img">
    <img height="240px" src="ontent/uploads/2014/11/PROD-Adolf-Hitler-whrend-einer-Rede.jpg" alt="Team Image">
</div>
<div class="effect-text">
    <h2>This is heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed purus consectetur, interdum felis in, auctor ligula.</p>
</div>
</div></div>

    <div class="box item8"><div class="effect-7">
<div class="effect-img">
    <img height="240px" src="https://static.onecms.io/wp-content/uploads/sites/20/2020/09/11/nature.jpg" alt="Team Image">
</div>
<div class="effect-text">
    <h2>This is heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed purus consectetur, interdum felis in, auctor ligula.</p>
</div>
</div></div>    <div class="box item9"><div class="effect-7">
<div class="effect-img">
    <img height="240px" src="ontent/uploads/2014/11/PROD-Adolf-Hitler-whrend-einer-Rede.jpg" alt="Team Image">
</div>
<div class="effect-text">
    <h2>This is heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed purus consectetur, interdum felis in, auctor ligula.</p>
</div>
</div></div>


    <div class="box item10"><div class="effect-7">
<div class="effect-img">
    <img height="240px" src="ontent/uploads/2014/11/PROD-Adolf-Hitler-whrend-einer-Rede.jpg" alt="Team Image">
</div>
<div class="effect-text">
    <h2>This is heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed purus consectetur, interdum felis in, auctor ligula.</p>
</div>
</div></div>    <div class="box item11"><div class="effect-7">
<div class="effect-img">
    <img height="240px" src="ontent/uploads/2014/11/PROD-Adolf-Hitler-whrend-einer-Rede.jpg" alt="Team Image">
</div>
<div class="effect-text">
    <h2>This is heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed purus consectetur, interdum felis in, auctor ligula.</p>
</div>
</div></div>








</div>

А нужно, чтобы получилась без верхнего длинного блока, как на рисунке: введите сюда описание изображения

1 ответ 1

2

.wrapper {
  margin: 0 0 20px 0;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(4, 300px); /*размер ячеек*/
  grid-template-rows: repeat(4,180px);/*высота ячеек*/
  justify-content: center;
  align-content: end;
}

.box {
  display:block;overflow: hidden;
  background-color: #444;
  color: #fff;
  border:1px solid grey;
  border-radius: 5px;
  font-size: 150%;
}

.item2 {
  grid-column: span 2;
  grid-row: span 2;
}
<div class="wrapper">    
  <div class="box item2">
    <div class="effect-7">
    <div class="effect-img">
     <img height="240px" src="ijijimgdf/sad/bat.jpg" alt="Team Image">
    </div>
    <div class="effect-text">
      <h2>This is heading</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed purus consectetur, interdum felis in, auctor ligula.</p>
    </div>
  </div>

  </div> 
    <div class="box item4"><div class="effect-7">
    <div class="effect-img">
      <img height="240px" src="ijijimgdf/menu/old.png" alt="Team Image">
    </div>
    <div class="effect-text">
      <h2>This is heading</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed purus consectetur, interdum felis in, auctor ligula.</p>
    </div>
    </div>
  </div>
  <div class="box item5"> <div class="effect-7">
  <div class="effect-img">
    <img height="240px" src="ijijfiles/swfcas/fung.jpg" alt="Team Image">
  </div>
  <div class="effect-text">
    <h2>This is heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed purus consectetur, interdum felis in, auctor ligula.</p>
  </div>
  </div>
</div>
  
     <div class="box item6"><div class="effect-7">
<div class="effect-img">
    <img height="240px" src="ijijimgdf/story/med1.jpg" alt="Team Image">
</div>
<div class="effect-text">
    <h2>This is heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed purus consectetur, interdum felis in, auctor ligula.</p>
</div>
</div></div>
    <div class="box item7"><div class="effect-7">
<div class="effect-img">
    <img height="240px" src="ontent/uploads/2014/11/PROD-Adolf-Hitler-whrend-einer-Rede.jpg" alt="Team Image">
</div>
<div class="effect-text">
    <h2>This is heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed purus consectetur, interdum felis in, auctor ligula.</p>
</div>
</div></div>

    <div class="box item8"><div class="effect-7">
<div class="effect-img">
    <img height="240px" src="https://static.onecms.io/wp-content/uploads/sites/20/2020/09/11/nature.jpg" alt="Team Image">
</div>
<div class="effect-text">
    <h2>This is heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed purus consectetur, interdum felis in, auctor ligula.</p>
</div>
</div></div>    <div class="box item9"><div class="effect-7">
<div class="effect-img">
    <img height="240px" src="ontent/uploads/2014/11/PROD-Adolf-Hitler-whrend-einer-Rede.jpg" alt="Team Image">
</div>
<div class="effect-text">
    <h2>This is heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed purus consectetur, interdum felis in, auctor ligula.</p>
</div>
</div></div>


    <div class="box item10"><div class="effect-7">
<div class="effect-img">
    <img height="240px" src="ontent/uploads/2014/11/PROD-Adolf-Hitler-whrend-einer-Rede.jpg" alt="Team Image">
</div>
<div class="effect-text">
    <h2>This is heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed purus consectetur, interdum felis in, auctor ligula.</p>
</div>
</div></div>    <div class="box item11"><div class="effect-7">
<div class="effect-img">
    <img height="240px" src="ontent/uploads/2014/11/PROD-Adolf-Hitler-whrend-einer-Rede.jpg" alt="Team Image">
</div>
<div class="effect-text">
    <h2>This is heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed purus consectetur, interdum felis in, auctor ligula.</p>
</div>
</div></div>








</div>

1
  • Спасибо))) Честно говоря я никогда бы не додумался поставить span) пойду практиковаться сеткам дальше)) 23 апр 2021 в 20:37

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.