Отзывчивый 2 сетки столбца ⇐ CSS

[Anonymous]

Я пытаюсь создать адаптивную сетку с мобильным первым столбцом, расширяющим до 2 столбцов, расширяющихся до 2 столбцов, когда экран становится все более Код ошибки показывает, но я не знаю, что нужно изменить. Оба столбца также должны быть одинаковым размером. p> сокращенный код CSS ниже: .Product-DIV-это то, где код сетки. >

Код: Выделить всё

/*product details*/
img {
width: 100%;
height: auto;
display: block;
border: 1px solid #B0B0B0;
border-radius: 5px;
object-fit: contain;
object-position: bottom;
margin-left: auto;
margin-right: auto;
text-align: center;
}

.main-wrapper {
min-height: 100vh;
position: relative;
display: grid;
align-items: center;
justify-content: center;
}

.container {
display: grid;
max-width: 1200px;
padding: 30px 5px;
background-color: yellow;
}

.product-div {
padding: 0px 0px 0px 0px;
display: grid;
grid-template-columns: 1fr 1fr;
/*grid-template-columns: repeat(2, minmax(150px, 1fr));*/
grid-template-rows: auto;
gap: 10px;
background-color: blue;
}

.product-div-left {
padding: 0px 30px 0px 30px;
text-align: center;
background-color: orange;
}

.product-div-right {
padding: 0px 30px 5px 30px;
border-top: 1px solid #BFCBCE;
background-color: white;
}

.image-container {
align-content: center;
}

.frame-img-container img {
border-radius: none;
border: none;
}

.img-container img {
width: 100%;
text-align: center;
height: auto;
margin: 0px;
border-radius: 5px;
}

.img-container-bk img {
width: 100%;
}

.img-container2 img {
width: 430px;
height: auto;
margin: 0 auto;
border-radius: 5px;
background-color: white;
}

.hover-container {
display: flex;
/*flex-wrap: wrap;*/
flex-wrap: wrap;
align-items: center;
justify-content: center;
margin-top: 20px;
}

.hover-container div {
padding: 0;
margin: 0 4px 8px 4px;
display: flex;
align-items: center;
justify-content: center;
}

.active {
border-color: #72848C !important;
/*js related*/
}

.hover-container div:hover {
border-color: #BFCBCE;
border: 2px solid;
border-radius: 5px;
transition: 5s;
}

.hover-container div img {
width: 100px;
height: auto;
cursor: pointer;
border-radius: 5px;
}< /code>






[img]images/publications/VFPorcelain_book/VF_book_022_2.jpg[/img]


[img]images/publications/VFPorcelain_book/VF_book_022_2.jpg[/img]
[img]images/publications/VFPorcelain_book/VF_book_054_4.jpg[/img]
[img]images/publications/VFPorcelain_book/VF_spread_1918_5.jpg[/img]
[img]images/publications/VFPorcelain_book/VF_spread_037_2.jpg[/img]





TITLE
VIVIENNE FOLEY PORCELAIN


A Monograph by the Author with a foreword by Audrey Whitty - former Deputy Director of the National Museum of Ireland.

Design by Rashna Mody-Clark.

Photography by Vivienne Foley from studio archives.

DESCRIPTION
Vivienne's monograph celebrates four decades as one of the world's leading contemporary porcelain designers.  This book showcases some of her finest work collected by museums, galleries and private collectors worldwide. A 'must have' book for anyone interested in the ultimate in wheel thrown porcelain.

*** SIGNED BY THE AUTHOR ***

SPECIFICATION

Publisher: Moonmouse Creative Ltd

Format: Paperback, 210x270mm

Language: English

Extent: 140 pages, 108 Full Colour Plates

ISBN: 978-0-9556042-0-1

DELIVERY
Price includes P&P to mainlaind UK destinations only. Please contact me for Overseas rates or purchase via Amazon.


[url=publications.html]Back[/url]

Подробнее здесь: https://stackoverflow.com/questions/793 ... olumn-grid