css grid out of box bz HAP

by Petr Haluza

HTML

<div class="conteiner">Grid</div>


<div class="WrapperGrid GridOverRight OutOfBox1">
  <div class="GridMessage">Přetíkací obrázek vpravo</div>
  <div class="GridImage"><img src="https://www.velocitymicro.com/img/product-pages/raptor-signature/amd-ryzen-radeon.png"></div>
  <div class="GridBg"></div>
</div>

<div class="WrapperGrid GridOverLeft OutOfBox1">
  <div class="GridMessage">Přetíkací obrázek vlevo</div>
  <div class="GridImage"><img src="https://www.velocitymicro.com/img/product-pages/raptor-signature/amd-ryzen-radeon.png"></div>
  <div class="GridBg"></div>
</div>

<div class="WrapperGrid GridHalfRight">
  <div class="GridMessage">Přetíkací obrázek vpravo</div>
  <div class="GridImage"><img src="https://www.velocitymicro.com/img/product-pages/raptor-signature/amd-ryzen-radeon.png"></div>
  <div class="GridBg"></div>
</div>

<div class="WrapperGrid GridHalfLeft">
  <div class="GridMessage">Přetíkací obrázek vlevo</div>
  <div class="GridImage"><img src="https://www.velocitymicro.com/img/product-pages/raptor-signature/amd-ryzen-radeon.png"></div>
  <div class="GridBg"></div>
</div>

<div class="WrapperGrid GridCenter">
  <div class="GridMessage">Text uprostřed, volitelně obrázek dole</div>
  <div class="GridImage"><img src="https://www.velocitymicro.com/img/product-pages/raptor-signature/amd-ryzen-radeon.png"></div>
  <div class="GridBg"></div>
</div>

<div class="WrapperGrid GridCenter GridImagesOnSide">
  <div class="GridMessage">Text uprostřed obrazky naboku</div>
  <div class="GridImageLeft"><img src="https://www.velocitymicro.com/img/product-pages/raptor-signature/amd-ryzen-radeon.png"></div>
  <div class="GridImageRight"><img src="https://www.velocitymicro.com/img/product-pages/raptor-signature/amd-ryzen-radeon.png"></div>
  <div class="GridBg"></div>
</div>

CSS

.conteiner { width:400px; margin:1em auto; border: 1px solid blue; border-radius:.5em}

.WrapperGrid { display: grid; grid-template-columns: calc(50% - 200px) 200px 200px calc(50% - 200px);}
.WrapperGrid  div {border: 1px solid red; border-radius:.5em; display:flex; align-items:center}

.WrapperGrid .GridBg  {  grid-column: 1 / 5;  grid-row: 1 / 4; background: linear-gradient(0deg, white,lightblue,white); z-index:1}


.GridOverRight .GridImage {  grid-column: 3 / 5;  grid-row: 1; z-index:2}
.GridOverRight .GridMessage   {  grid-column: 2 / 3;  grid-row: 1; z-index:3}

.GridOverLeft .GridMessage {  grid-column: 3 / 4;  grid-row: 1; z-index:3}
.GridOverLeft .GridImage   {  grid-column: 1 / 3;  grid-row: 1; z-index:2; justify-content: end;}

.GridHalfRight .GridMessage {  grid-column: 2 / 3;  grid-row: 1; z-index:3}
.GridHalfRight .GridImage   {  grid-column: 3 / 4;  grid-row: 1; z-index:2;}

.GridHalfLeft .GridMessage {  grid-column: 3 / 4;  grid-row: 1; z-index:3}
.GridHalfLeft .GridImage   {  grid-column: 2 / 3;  grid-row: 1; z-index:2;}

.GridCenter .GridMessage {  grid-column: 2 / 4;  grid-row: 1; z-index:3; justify-content: center; text-align: center;}
.GridCenter .GridImage   {  grid-column: 2 / 4;  grid-row: 2; z-index:2}

/*.WrapperGrid.GridImagesOnSide { grid-template-columns: calc(50% - 200px) 200px 200px calc(50% - 200px);}*/
.GridCenter.GridImagesOnSide .GridMessage {  grid-column: 2 / 4;  grid-row: 1; z-index:3; justify-content: center; padding:0 100px}
.GridCenter.GridImagesOnSide .GridImageLeft {  grid-column: 1 / 2;  grid-row: 1; z-index:2; justify-content: end; margin:0 -100px}
.GridCenter.GridImagesOnSide .GridImageRight  {  grid-column: 4 / 5;  grid-row: 1; z-index:2; margin:0 -100px}


.WrapperGrid img {width:100%;max-width:300px;}
.WrapperGrid.OutOfBox1 img { margin:-1em 0}

@media screen and (max-width:350px) {
  .WrapperGrid  { display:flex; flex-direction:column; position:relative}
  .WrapperGrid .GridBg  { position: absolute; height: 100%;...