I am trying to create a responsive grid with mobile first one column expanding to 2 columns expanding to 2 columns as screen gets wider using grid-template-columns. Error code shows but I don't know what needs to change. Both columns should be same size also.
I have set @media 768px to expand to the two columns. Something is wrong somewhere!
shortened CSS code below: .product-div is where the grid code is.
/*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;
}<main>
<div class="main-wrapper">
<div class="container">
<div class="product-div">
<div class="product-div-left">
<div class="img-container"><img src="images/publications/VFPorcelain_book/VF_book_022_2.jpg" alt="VF Book"></div>
<div class="hover-container">
<div><img src="images/publications/VFPorcelain_book/VF_book_022_2.jpg" alt="vfspread_041_3" title="cover "></div>
<div><img src="images/publications/VFPorcelain_book/VF_book_054_4.jpg" alt="vfspread_054_4" title="pg 44-45"></div>
<div><img src="images/publications/VFPorcelain_book/VF_spread_1918_5.jpg" alt="vfspread_1918_5" title="pg 60-61 "></div>
<div><img src="images/publications/VFPorcelain_book/VF_spread_037_2.jpg" alt="vfspread_037_2" title="pg 130-131"></div>
</div>
</div>
<div class="product-div-right">
<div><span class="title"></span><br>
<p class="alignleft">TITLE</p>
<p class="alignright">VIVIENNE FOLEY PORCELAIN</p>
<div style="clear: both;"></div>
<p class="description2">A Monograph by the Author with a foreword by Audrey Whitty - former Deputy Director of the National Museum of Ireland.<br><br>
Design by Rashna Mody-Clark.<br>
Photography by Vivienne Foley from studio archives.<br></p>
<div><span class="description">DESCRIPTION</span></div>
<p class="description2">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.<br></p>
<p>*** SIGNED BY THE AUTHOR ***</p><br>
<div><span class="description">SPECIFICATION</span></div>
<p class="description2">
Publisher: Moonmouse Creative Ltd<br>
Format: Paperback, 210x270mm<br>
Language: English<br>
Extent: 140 pages, 108 Full Colour Plates<br>
ISBN: 978-0-9556042-0-1</p>
<div style="clear: both;"></div>
<div><span class="description">DELIVERY</span></div>
<p class="description2">Price includes P&P to mainlaind UK destinations only. Please contact me for Overseas rates or purchase via Amazon.</p>
</div>
<div id="paypal-container-W4V5HHQNP95"></div>
<div><a href="publications.html" onClick="history.go(-1)">Back</a>
</div>
</div>
</div>
</div>
</div>
</main>To have one column on small screen widths and more on larger widths you can use the auto-fit keyword on your grid:
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
When 300px becomes available for the container it will expand to fill two columns. Note that extra children in your markup may form third, fourth etc. columns
/*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: repeat(auto-fit, 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;
}<main>
<div class="main-wrapper">
<div class="container">
<div class="product-div">
<div class="product-div-left">
<div class="img-container"><img src="images/publications/VFPorcelain_book/VF_book_022_2.jpg" alt="VF Book"></div>
<div class="hover-container">
<div><img src="images/publications/VFPorcelain_book/VF_book_022_2.jpg" alt="vfspread_041_3" title="cover "></div>
<div><img src="images/publications/VFPorcelain_book/VF_book_054_4.jpg" alt="vfspread_054_4" title="pg 44-45"></div>
<div><img src="images/publications/VFPorcelain_book/VF_spread_1918_5.jpg" alt="vfspread_1918_5" title="pg 60-61 "></div>
<div><img src="images/publications/VFPorcelain_book/VF_spread_037_2.jpg" alt="vfspread_037_2" title="pg 130-131"></div>
</div>
</div>
<div class="product-div-right">
<div><span class="title"></span><br>
<p class="alignleft">TITLE</p>
<p class="alignright">VIVIENNE FOLEY PORCELAIN</p>
<div style="clear: both;"></div>
<p class="description2">A Monograph by the Author with a foreword by Audrey Whitty - former Deputy Director of the National Museum of Ireland.<br><br>
Design by Rashna Mody-Clark.<br>
Photography by Vivienne Foley from studio archives.<br></p>
<div><span class="description">DESCRIPTION</span></div>
<p class="description2">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.<br></p>
<p>*** SIGNED BY THE AUTHOR ***</p><br>
<div><span class="description">SPECIFICATION</span></div>
<p class="description2">
Publisher: Moonmouse Creative Ltd<br>
Format: Paperback, 210x270mm<br>
Language: English<br>
Extent: 140 pages, 108 Full Colour Plates<br>
ISBN: 978-0-9556042-0-1</p>
<div style="clear: both;"></div>
<div><span class="description">DELIVERY</span></div>
<p class="description2">Price includes P&P to mainlaind UK destinations only. Please contact me for Overseas rates or purchase via Amazon.</p>
</div>
<div id="paypal-container-W4V5HHQNP95"></div>
<div><a href="publications.html" onClick="history.go(-1)">Back</a>
</div>
</div>
</div>
</div>
</div>
</main>