HTML CSS: добавлены линии сетки границ только для внутренних элементов - PullRequest
Новая
       10

HTML CSS: добавлены линии сетки границ только для внутренних элементов

0 голосов
/ 08 июля 2019

У меня есть Grid Image Gallery.Я хотел бы иметь серые границы линий сетки между всеми картинками изображения, только внутренними, а не внешними линиями.Как бы я это сделал?Чтение всей документации, поиск свойства цвета линии сетки.

Кто-нибудь знает свойство в CSS или HTML?У меня будут разные конфигурации картинок. 

.card {
    border-color: #D3D3D3;
    border-style: solid;
    border-width: 1px;
    width: 100%;
    margin-right: 0;
    padding: 0;
}

.card-header {
    background-color: white;
}

.card-body {
    background-color: white;
}


.cardcheckbox {
    position: absolute;
    right: 5px;
    top: 5px;
    /*vertical-align: middle;
    float: right;*/
    visibility: hidden;
}


input[type=checkbox]:checked {
    visibility: visible;
}

.card:hover .cardcheckbox {
    visibility: visible;
}


.material-icons {
    display: inline-flex;
    vertical-align: top;
}

.card-header .accordion-toggle {
    &.collapsed:after {
        font-family: 'Material Icons';
        content: "\e5cf";
    }

    &:after {
        font-family: 'Material Icons';
        content: "\e5ce";
        float: right;
        color: grey;
    }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="card" style="width: 30.00rem">
   <div aria-multiselectable="true" class="accordian md-accordion" id="accordionEx" role="tablist">
      <div class="grid-container" id="gridid531937b3b9b54801ab80573cf91d0852" style="  display: grid;
         grid-template-columns: repeat(3, 1fr);
         grid-template-rows: repeat(1, 1fr);
         grid-gap: 0em;
         padding: 0px;
         align-items: stretch;
         position: relative; "><input class="cardcheckbox" id="checkid" type="checkbox"><img id="imgid531937b3b9b54801ab80573cf91d08520" src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&amp;preset=gallery-tab-main-image" style="max-width: 100%; max-height: 100%; padding: 0px; background-color: white;"><img id="imgid531937b3b9b54801ab80573cf91d08521" src="https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg?itok=YmYkBfY7" style="max-width: 100%; max-height: 100%; padding: 0px; background-color: white;"><img id="imgid531937b3b9b54801ab80573cf91d08522" src="https://openbookphilly.com/wp-content/uploads/2016/11/bookstack.png" style="max-width: 100%; max-height: 100%; padding: 0px; background-color: white;"></div>
      <div class="card-header" id="headingOne1" role="tab"><a aria-controls="id531937b3b9b54801ab80573cf91d0852" aria-expanded="true" class="accordion-toggle collapsed" data-parent="#accordionEx" data-toggle="collapse" href="#id531937b3b9b54801ab80573cf91d0852">Tree</a></div>
      <div aria-labelledby="headingOne1" class="collapse" data-parent="#accordionEx" id="id531937b3b9b54801ab80573cf91d0852" role="tabpanel">
         <div class="card-body">Tree with leaves</div>
      </div>
   </div>
</div>

enter image description here

1 Ответ

2 голосов
/ 08 июля 2019

Вы можете использовать grid-template-columns для выполнения этого трюка.

  • создать родительский контейнер, который будет содержать ваши четыре изображения.

  • установить цвет фона (желаемый цвет границы).

  • установить отступы на 0

  • , затем выполнить трюк, расположив изображения поgrid-template-column: auto
    auto;

  • , затем добавьте к ним пробел: grid-gap: 10px;(для отображения цвета фона контейнера в виде сетки).

см. код ниже для справки 

.container {
  width: 200px;
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 10px;

  background-color: #000;
  padding: 0;
}
.container > div {
  background-color: #ccc;
  padding: 20px;
  text-align: center;
}

html 

<div class="container">
      <div>Image here</div>
      <div>Image Here</div>
      <div>Image here</div>
      <div>Image here</div>
    </div>

, чтобы помочь вам визуализировать, я создаю пример кода

http://plnkr.co/edit/gIeumXLt0k3FPVCgGlDd?p=preview

Надеюсь, это поможет

Ура!

...