Automatyczny Grid Cssa

Question

Witam, mam taki problem. Szukam już chyba po całym internecie rozwiązania lecz na marne. 

Szukam sposobu aby stworzyć grid Cssa, który automatycznie będzie się przystosowywał do wielkości boxa, który zostanie dynamicznie wstawiony.  Czy to jest możliwe w jakiś prosty sposób? Czy ktoś już cos takiego stworzył? 

Proszę o pomoc i dziękuję :)

Tutaj szkic tego co bym chciał osiągnąć, już tracę nadzieję haha:

https://ibb.co/vvMPQSV

Answer 1

Propozycja  

<div class="menu-grid-container">
  <div class="menu-1"></div>
  <div class="menu-2"></div>
  <div class="menu-3"></div>
  <div class="menu-4"></div>
</div>

<template id="menu-box">
  <div class="menu-box">
    <div class="box-title {{css}}">{{title}}</div>
    {{list}}
  </div>
</template>

<template id="menu-box-list">
  <div class="box-list {{css}}">{{dish}}</div>
</template>

* {
  box-sizing: border-box;
}
body {
  background-color: black;
}

.menu-grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 0px 1em;
  grid-template-areas:
    "menu-1 menu-2 menu-3 menu-4";

  width: 80vw;
  margin: 0 auto;
}
.menu-1 { grid-area: menu-1; }
.menu-2 { grid-area: menu-2; }
.menu-3 { grid-area: menu-3; }
.menu-4 { grid-area: menu-4; }

.menu-box {
  width: 100%;
  heigth: auto;  
  border-radius: 0.6em;
  background-color: gray;
  text-align: center;
  margin: 0.5em;
  margin-bottom: 0.6em;
  padding-bottom: 0.5em;
}
.menu-box .box-title {
  width: 100%;
  font: 1.2em/1.8em monospace;
  border-top-left-radius: 0.6em;
  border-top-right-radius: 0.6em;
  margin-bottom: 0.5em;
}
.menu-box .box-list {
  width: 95%;
  font: 1.1em/1.5em monospace;
  margin: 0 auto;
  margin-bottom: 0.25em;
  border-radius: 0.6em;
  cursor: default;
  transition: background-color 0.45s;
}


.gray {
  background-color: #a0a0a0;
}
.menu-box .box-list.gray:hover {
  background-color: rgba(145,145,145,0.86);
}
.red {
  background-color: red;
}
.menu-box .box-list.red:hover {
  background-color: rgba(230,0,0,0.86);
}
.orange {
  background-color: orange;
}
.menu-box .box-list.orange:hover {
  background-color: rgba(225,145,0,0.86);
}
.green {
  background-color: limegreen;
}
.menu-box .box-list.green:hover {
  background-color: rgba(50,185,50,0.86);
}

const  menu_title = [null,'Pstrąg','Pieczeń'];
const menu_dishes = [null,'Kopytka','Frytki','Surówka'];

const menu = [
  { css:'red', column:1, title:1, list:'1,1,1' },
  { css:'red', column:1, title:1, list:'1,1,1' },
  { css:'red', column:1, title:1, list:'1,1,1' },
  { css:'red', column:1, title:1, list:'1,1,1' },
  { css:'gray', column:2, title:2, list:'1,2,1' },
  { css:'gray', column:2, title:1, list:'1,3' },
  { css:'gray', column:2, title:1, list:'1,2,3' },
  { css:'orange', column:2, title:2, list:'1,2,2' },
  { css:'red', column:3, title:1, list:'1,1' },
  { css:'red', column:3, title:1, list:'1,1' },
  { css:'green', column:3, title:1, list:'1,1,3' },
  { css:'red', column:3, title:1, list:'1,1,2,3' },
  { css:'gray', column:4, title:1, list:'1,2,1' },
  { css:'gray', column:4, title:2, list:'1,3' },
  { css:'gray', column:4, title:1, list:'1,2,3' }  
];


const menu_columns = document.querySelectorAll('.menu-grid-container div[class*="menu"]');
const menu_template = document.querySelector('template#menu-box').innerHTML;
const box_list = document.querySelector('template#menu-box-list').innerHTML;

window.onload = () => {
  menu.forEach(single_box => {
    const css = single_box.css,
          column = single_box.column,
          title = menu_title[single_box.title],
          list = single_box.list.split(',');
    
    let single_box_html = menu_template.replace('{{title}}', title);
        single_box_html = single_box_html.replace('{{css}}', css);        
    
    let list_html = '';
    list.forEach(id_dish => {
      list_html += box_list.replace('{{css}}',css).replace('{{dish}}', menu_dishes[id_dish]);
      
    })
    
    single_box_html = single_box_html.replace('{{list}}', list_html);
    menu_columns[column - 1].innerHTML += single_box_html;
  })
}

Comments

Hej wygląda bosko, dziękuję bardzo.

Czy mógłbym Cię prosić o wytłumaczenie mi jak działa ten kod? :)

---

Rozumiem, że chodzi Tobie o js-a, bo chyba html-a i css-a nie muszę?  

---

Dokładnie :)

---

Tablice

 

kolejność wierszy w tablicy menu nie ma znaczenia (brana jest pod uwagę wartość: column:, w tym przypadku od 1 do 4).

możesz dodać kolejne "wartości" do menu, w przypadku prezentowanym poniżej jest to np.: total_price: (cena całkowita zestawu), gdy nie jest ustawiona, wstawiane jest: 0.00 itp. możesz robić modyfikacje.

 

<div class="menu-grid-container">
  <div class="menu-1"></div>
  <div class="menu-2"></div>
  <div class="menu-3"></div>
  <div class="menu-4"></div>
</div>

<template id="menu-box">
  <div class="menu-box">
    <div class="box-title {{css}}">{{title}}</div>
    {{list}}
    <div class="box-footer {{css}}"><b>Cena:</b> {{total_price}} pln</div>
  </div>
</template>

<template id="menu-box-list">
  <div class="box-list {{css}}">{{dish}}</div>
</template>

* {
  box-sizing: border-box;
}
body {
  background-color: black;
}

.menu-grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 0px 1em;
  grid-template-areas:
    "menu-1 menu-2 menu-3 menu-4";

  width: 80vw;
  margin: 0 auto;
}
.menu-1 { grid-area: menu-1; }
.menu-2 { grid-area: menu-2; }
.menu-3 { grid-area: menu-3; }
.menu-4 { grid-area: menu-4; }

.menu-box {
  width: 100%;
  heigth: auto;  
  border-radius: 0.6em;
  background-color: gray;
  text-align: center;
  margin: 0.5em;
  margin-bottom: 0.6em;
}
.menu-box .box-title {
  width: 100%;
  font: 1.2em/1.8em monospace;
  border-top-left-radius: 0.6em;
  border-top-right-radius: 0.6em;
  margin-bottom: 0.5em;
}
.menu-box .box-footer {
  width: 100%;
  font: 1em/1.5em monospace;
  border-bottom-left-radius: 0.6em;
  border-bottom-right-radius: 0.6em;
  margin-top: 0.6em;
}
.menu-box .box-list {
  width: 95%;
  font: 1.1em/1.5em monospace;
  margin: 0 auto;
  margin-bottom: 0.25em;
  border-radius: 0.6em;
  cursor: default;
  transition: background-color 0.45s;
}


.gray {
  background-color: #a0a0a0;
}
.menu-box .box-list.gray:hover {
  background-color: rgba(145,145,145,0.86);
}
.red {
  background-color: red;
}
.menu-box .box-list.red:hover {
  background-color: rgba(230,0,0,0.86);
}
.orange {
  background-color: orange;
}
.menu-box .box-list.orange:hover {
  background-color: rgba(225,145,0,0.86);
}
.green {
  background-color: limegreen;
}
.menu-box .box-list.green:hover {
  background-color: rgba(50,185,50,0.86);
}

const  menu_title = [null,'Pstrąg','Pieczeń'];
const menu_dishes = [null,'Kopytka','Frytki','Surówka 120g','Kompot 0.33l'];

const menu = [
  { css:'green', column:3, title:1, list:'1,1,3,4', total_price:'34.50' },
  { css:'red', column:1, title:1, list:'1,1,1', total_price:'41.32' },
  { css:'red', column:1, title:1, list:'1,1,1', total_price:'100.10' },
  { css:'gray', column:2, title:2, list:'1,2,1', total_price:'120.00' },
  { css:'gray', column:2, title:1, list:'1,3', total_price:'80.00' },
  { css:'gray', column:2, title:1, list:'1,2,3', total_price:'72.00' },
  { css:'orange', column:2, title:2, list:'1,2,2', total_price:'120.00' },
  { css:'red', column:3, title:1, list:'1,1' },
  { css:'red', column:3, title:1, list:'1,1,4' },
  { css:'red', column:3, title:1, list:'1,1,2,3', total_price:'12.80' },
  { css:'gray', column:4, title:1, list:'1,2,1' },
  { css:'gray', column:4, title:2, list:'1,3' },
  { css:'gray', column:4, title:1, list:'1,2,3', total_price:'80.00' },
  { css:'red', column:1, title:1, list:'1,1,1', total_price:'120.00' },
  { css:'red', column:1, title:1, list:'1,1,1' },
];


const menu_columns = document.querySelectorAll('.menu-grid-container div[class*="menu"]');
const menu_template = document.querySelector('template#menu-box').innerHTML;
const box_list = document.querySelector('template#menu-box-list').innerHTML;

window.onload = () => {
  menu.forEach(single_box => {
    const css = single_box.css,
          column = single_box.column,
          title = menu_title[single_box.title],
          list = single_box.list.split(','),
          total_price = (single_box.total_price) ? single_box.total_price : '0.00';

    let single_box_html = menu_template.replace('{{title}}', title);
        single_box_html = single_box_html.replace(/{{css}}/g, css);
        single_box_html = single_box_html.replace('{{total_price}}', total_price);

    let list_html = '';
    list.forEach(id_dish => {
      list_html += box_list.replace('{{css}}',css).replace('{{dish}}', menu_dishes[id_dish]);     
    })

    single_box_html = single_box_html.replace('{{list}}', list_html);
    menu_columns[column - 1].innerHTML += single_box_html;
  })
}

---

Bardzo dziękuję za pomoc :)!