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 that you have read and understand our privacy policy and code of conduct.

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