Как я могу сделать свою сетку CSS даже с цветом фона? - PullRequest
Новая
       19

Как я могу сделать свою сетку CSS даже с цветом фона?

1 голос
/ 12 марта 2019

Я пытался сделать четную сетку 3х2.Некоторые из блоков длиннее, а остальные, и я хочу, чтобы они были одинаковой длины.Какова будет лучшая практика CSS для этого?Картинки - это то, чего я достиг до сих пор.

enter image description here

enter image description here

HTML 

<div class="column col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div class="service-block-two single-item" id="service_pest">
<div class="inner-box">
<div class="content">
<div class="clearfix top-area">
<div class="text">
<h4>Insect Control</h4>
</div>
</div>
<p>Insect control is an on going maintenance issue on Nantucket. We recommend foundation treatments 2-3 times per year to keep all kinds of insects at bay. Ants, pill bugs, earwigs and a whole host of other insects can be a nuisance, let us deal with them so you don't have too.
</p><br>
<div class="link"><a href="http://mjstokes.com/buzzoff/pest-control/" class="btn-style-one">More Details</a></div>
</div>
</div>
</div>
</div>

CSS 

.service-block-two{
    position:relative;
    margin-bottom: 100px;
    background-color: #f7f7f7f7;
    padding-top: 35px;
    padding-bottom: 35px;

}

.service-block-two .content p {
    text-align: center;
    width: auto;
}

.service-block-two .content .link {
    text-align: center;
}

Ответы [ 2 ]

0 голосов
/ 14 марта 2019

CSS grid является отличным вариантом и хорошо работает, где поддерживается.

Если поддержка браузера вызывает беспокойство, вы также можете использовать flexbox, который имеет немного лучшую поддержку. Независимо от того, вам понадобятся префиксы поставщиков.

Пример кода ручки: https://codepen.io/anon/pen/GeQREE

Codepen screenshot

CSS изменения довольно просты. Родительским / упаковочным элементам потребуется следующее: 

display: flex;
flex-wrap: wrap;

Самым простым изменением для детей будет ширина. Что-то вроде: 

width: 31%;
margin: 1%;

(общая ширина будет 33% или 3 в поперечнике)

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

0 голосов
/ 12 марта 2019

Вы можете достичь этого очень легко с новой функцией css grid .Поддержка браузера довольно хорошая.вам может понадобиться добавить префиксы вендоров, чтобы иметь максимальную поддержку браузера.

По сути, вам нужен родительский div, который содержит / переносит его дочерние элементы (для вашего случая это будут серые прямоугольники).

Предположим, что это HTML: 

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

, а CSS для этой сетки 3 (столбец) x2 (строка) будет: 

.parent {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(2,1fr);
    grid-gap: 15px;
}

.child {
    background: #f7f7f7;
    padding: 15px;
}

Всестолбцы в строке будут одинаковой высоты и равны самому высокому столбцу.Вот рабочая ссылка codepen , чтобы увидеть ее в действии.

...