0

При использовании простой таблицы (table) рамка вокруг таблицы задается просто:

TD, TH {
    border: 2px solid green; /* Рамка вокруг ячеек */
}

В случае css grid у меня возникли затруднения с рамкой вокруг ячеек. Я хочу чтобы рамка вокруг ячеек проходила ровно посередине grid-gap (примерно как зеленые линии)

Если задавать у элемента grid border, то чтобы он проходил посередине нужно задавать отрицательный margin (и не забывать убирать его по краям).

При этом почему то между border остается промежуток.

Как задать border в 1 пиксель посередине между элементами grid ?

Иллюстрация: введите сюда описание изображения

body {
  box-sizing: border-box;
  --gap_size : 40px;
  --gap_size2 : -20px;
}

.wrapper {
   display: grid;
   grid-template-columns: repeat(3,1fr);
   grid-auto-rows: 200px;
   grid-gap: var(--gap_size);
   position: relative;
  align-items : center;
  margin : 50px;
  
}

.box2 {
  align-self : stretch;
  background:lightgrey;
  position : relative;
}


.flex {
    display: flex;
    justify-content: center; /*Центрирование по горизонтали*/
    align-items: center;     /*Центрирование по вертикали */
    height : 100%;
    text-align : center;
    border : 1px solid green;
    margin : 0  var(--gap_size2 );
}



div {border : 1px solid red;}
<div class="wrapper">
  <div class="box2"><div class="flex">One</div></div>
   <div class="box2">
     <div class="flex">
        Two  является центром еще предложение
     </div>
  </div>
   <div class="box2">
     <div class="flex">
        Этот блок 
     </div>    
   </div>
</div>

2 ответа 2

1

Вот ответ: https://codepen.io/joshmarinacci/full/EQXyvM

Как делается: все grid item должны занимать полное пространство своего блока.

Контейнеру grid задаются свойства: background и grid-gap

В результате background контейнера выглядывает через grid-gap и получаются рамки между ячейками.

введите сюда описание изображения

#grid {
    display: grid;
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    grid-template-columns: 
        [start] minmax(auto, min-content) 
        [center] auto 
        [end] minmax(auto, min-content);
    grid-template-rows: 
        [header] 2em 
        [middle] auto 
        [footer] 2em;
    padding: 0;
    grid-gap: 10px;
/*     grid-row-gap: 1px; */
    background-color: red;
}

.start { grid-column-start: start; }
.center { grid-column-start: center; }
.end { grid-column-start: end; }
.header { grid-row-start: header; }
.middle { grid-row-start: middle; }
.footer { grid-row-start: footer; }



/* extra styles */
.scroll { overflow: auto;  }
.spacer { flex: 1; }

.panel, .toolbar { background-color: #ccc; }

.toolbar {
  display:flex;
  flex-direction: row;
  align-items: stretch;
}
.toolbar button {
  background-color: #ccc;
  border: 0px solid black;
}
.toolbar button:hover {
  background-color: #888;
}
.content { background-color: white; }


html, body {
  font-family: sans-serif;
  padding:0;
  margin:0;
}

.start, .end { min-width: 150px; }
.closed { display: none; }
<html>
  <head>
<!--     <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet"> -->
  </head>
  <body>
    <div id='grid'>
      <div class="toolbar header start">cool editor</div>
      <div class="panel middle start scroll">
        This left side panel hasreallywidetextthattakesupalotofspace
        and a min width of 150px. 
        Closing this panel will set display to <i>none</i>;
      </div>
      <div class="toolbar footer start">
        <button class="fa fa-plus-circle"></button>
        <button class="fa fa-minus-circle"></button>
      </div>

      <div class="toolbar header center">
        <button class="fa fa-save"></button>
        <span class='spacer'></span>
        <label>current file</label>
        <span class='spacer'></span>
        <button class="fa fa-file"></button>
      </div>
      
      <div class="content middle center">
        this is the content that we are editing       
      </div>
      
      <div class="toolbar footer center">
        <button id="toggle-left"> &lt;</button>
        <span class='spacer'></span>
        <button id="toggle-right"> &gt;</button>
      </div>

      
      <div class="toolbar header end">selected item</div>

      <div class="panel middle end scroll">
        the right side panel
      </div>
      
      <div class="toolbar footer end">more actions</div>
    </div>
  </body>
</html>

0

Еще один вариант добавить box-shadow:

box-shadow: 0px 0px 0px 4px blue;

Если четвертый параметр задать как половину gap - то будут сплошные рамки.

0

Ваш ответ

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

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