Это похоже на типичный flex
макет.
Для адаптивной части вам понадобится flex-wrap
и min-with
или mediaquer ie
.conatiner .table {
}
.container .table .table-row {
display:flex;
flex-wrap:wrap;
}
.container .table .table-row .table-cell {
flex:1;
min-width: 20%;
padding: 10px;
/*optionnal*/
display:flex;
flex-direction:column;
}
.container .table .table-row .table-cell .name {
text-align: center;
margin-bottom: 20px;
font-family: monospace;
font-size: 27px;
/*optionnal*/
flex:1;
}
.container .table .table-row .table-cell .img {
height: 280px;
background-color: brown;
}
.container .table .table-row .table-cell .content {
padding: 5px;
font-size: 18px;
font-family: serif;
}
@media screen and (max-width:992px) {
.container .table .table-row .table-cell {
min-width:40%;
}
}
@media screen and (max-width:576px) {
.container .table .table-row {
display:block;
}
}
<div class="container">
<div class="table" id="table">
<div class="table-row" id="row">
<div class="table-cell" id="serv">
<div class="name">web development</div>
<div class="img"></div>
<div class="content"></div>
</div>
<div class="table-cell" id="serv">
<div class="name">logical game development</div>
<div class="img"></div>
<div class="content">
<!-- text goes here-->
</div>
</div>
<div class="table-cell" id="serv">
<div class="name">web app development</div>
<div class="img"></div>
<div class="content">
<!-- the text goes here -->
</div>
</div>
<div class="table-cell" id="serv">
<div class="name">content writing</div>
<div class="img"></div>
<div class="content">
<!-- the text goes here -->
</div>
</div>
</div>
</div>
</div>
flex:1
+ min-width
- это способ добавить некоторую настройку поля (или отступа / границы в зависимости от размера поля), не пытаясь вычислить Конечная ширина flex:1;min-width:20%;
будет распылять 4 элемента в строке, полностью заполненной, где маркер, границы или отступы будут устранены гибкой моделью.
- Без медиаквера ie, но только пиксель мин. По ширине ваши ящики могут переноситься на следующую строку, но одна упадет первой, затем другой, затем все они (4)
пример
.conatiner .table {
}
.container .table .table-row {
display:flex;
flex-wrap:wrap;
}
.container .table .table-row .table-cell {
flex:1;
min-width: 350px;
padding: 10px;
/*optionnal*/
display:flex;
flex-direction:column;
}
.container .table .table-row .table-cell .name {
text-align: center;
margin-bottom: 20px;
font-family: monospace;
font-size: 27px;
/*optionnal*/
flex:1;
}
.container .table .table-row .table-cell .img {
height: 280px;
background-color: brown;
}
.container .table .table-row .table-cell .content {
padding: 5px;
font-size: 18px;
font-family: serif;
}
<div class="container">
<div class="table" id="table">
<div class="table-row" id="row">
<div class="table-cell" id="serv">
<div class="name">web development</div>
<div class="img"></div>
<div class="content"></div>
</div>
<div class="table-cell" id="serv">
<div class="name">logical game development</div>
<div class="img"></div>
<div class="content">
<!-- text goes here-->
</div>
</div>
<div class="table-cell" id="serv">
<div class="name">web app development</div>
<div class="img"></div>
<div class="content">
<!-- the text goes here -->
</div>
</div>
<div class="table-cell" id="serv">
<div class="name">content writing</div>
<div class="img"></div>
<div class="content">
<!-- the text goes here -->
</div>
</div>
</div>
</div>
</div>
альтернатива предыдущему фрагменту, где последний блок не расширяет всю ширину, когда он один во второй строке: https://codepen.io/gc-nomade/pen/OJVwVpw (псевдо толкает его)
- другой вариант - использовать сетку, здесь есть возможность без медиазапросов
.conatiner .table {
}
.container .table .table-row {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(350px,1fr));
}
.container .table .table-row .table-cell {
flex:1;
min-width: 350px;
padding: 10px;
/*optionnal*/
display:flex;
flex-direction:column;
}
.container .table .table-row .table-cell .name {
text-align: center;
margin-bottom: 20px;
font-family: monospace;
font-size: 27px;
/*optionnal*/
flex:1;
}
.container .table .table-row .table-cell .img {
height: 280px;
background-color: brown;
}
.container .table .table-row .table-cell .content {
padding: 5px;
font-size: 18px;
font-family: serif;
}
<div class="container">
<div class="table" id="table">
<div class="table-row" id="row">
<div class="table-cell" id="serv">
<div class="name">web development</div>
<div class="img"></div>
<div class="content"></div>
</div>
<div class="table-cell" id="serv">
<div class="name">logical game development</div>
<div class="img"></div>
<div class="content">
<!-- text goes here-->
</div>
</div>
<div class="table-cell" id="serv">
<div class="name">web app development</div>
<div class="img"></div>
<div class="content">
<!-- the text goes here -->
</div>
</div>
<div class="table-cell" id="serv">
<div class="name">content writing</div>
<div class="img"></div>
<div class="content">
<!-- the text goes here -->
</div>
</div>
</div>
</div>
</div>