Search code examples
javascriptcsscss-grid

How can I arrange the elements close to each other?

const displayWrapper = document.getElementById('displayWrapper');
const resizeHandle = document.getElementById('resizeHandle');

let startX = 0;
let startWidth = 0;

function startDrag(e) {
  startX = e.clientX;
  startWidth = parseInt(document.defaultView.getComputedStyle(displayWrapper).width, 10);
  document.documentElement.addEventListener('mousemove', drag);
  document.documentElement.addEventListener('mouseup', stopDrag);
}

function drag(e) {
  const newWidth = startWidth + (e.clientX - startX);
  displayWrapper.style.width = newWidth + 'px';
}

function stopDrag() {
  document.documentElement.removeEventListener('mousemove', drag);
  document.documentElement.removeEventListener('mouseup', stopDrag);
}

resizeHandle.addEventListener('mousedown', startDrag);
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.container {
  display: grid;
  grid-template-columns: minmax(40px, 80px) 0.8fr 2fr;
  grid-template-rows: auto 1fr 1fr 1fr;
  height: 100vh;
}

.sidebar {
  background-color: white;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));
  justify-content: center;
  align-items: center;
  height: 100vh;
  position: relative;
}

.titles {
  background-color: #f0f0f0;
  border: 1px solid black;
  height: 40vh;
  grid-column: 3 / 4;
  grid-row: 1 / 2;
  overflow: hidden;
}

.playlist {
  background-color: #f0f0f0;
  border: 1px solid black;
  grid-column: 3 / 4;
  grid-row: 2 / 4;
  height: 60vh;
  overflow: hidden;
}

.player {
  background-color: #f0f0f0;
  border: 1px solid black;
  grid-column: 2 / 3;
  grid-row: 4 / 5;
}

.display-wrapper {
  overflow: hidden;
  display: flex;
  justify-content: center;
  resize: horizontal;
  min-width: 200px;
  max-width: calc(100% - 80px);
  border: 1px solid red;
}

.display {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.display img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.resize-handle {
  width: 10px;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  cursor: ew-resize;
  background: transparent;
}

.menu-items {
  list-style: none;
  justify-self: center;
  margin: 0;
  padding: 0;
}

.menu-item {
  width: auto;
  align-self: center;
}

svg {
  cursor: pointer;
  width: 33px;
  height: auto;
  display: block;
  margin: auto;
  margin-top: 11vh;
  fill: gray;
}

svg#heart:hover {
  fill: rgb(240, 86, 86);
}

svg:hover {
  transform: scale(1.2);
  transition: all 0.3s;
}

svg#home:hover {
  fill: orange;
}

svg#music {
  border: 1px solid gray;
  border-radius: 5px;
  padding: 1px
}

svg#music:hover {
  fill: rgb(253, 179, 119);
  border-color: rgb(253, 179, 119);
}

svg#search:hover {
  fill: rgb(63, 141, 141);
}

svg#add:hover {
  fill: rgb(46, 46, 46);
}

.logo {
  justify-self: start;
  align-self: start;
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Audio Player</title>
</head>

<body>
  <div class="container">
    <div class="sidebar">
      <ul class="menu-items">
        <li class="menu-item">
          <img src="./src/icons/logo.png" class="logo" alt="logo">
        </li>
        <li class="menu-item">
          <svg id="home" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m9.08116 2.78259c1.71624-1.33679 4.12134-1.33679 5.83764 0l5 3.89445c1.1555.90001 1.8312 2.28276 1.8312 3.74736v7.0454c0 2.6234-2.1267 4.75-4.75 4.75h-10.00006c-2.62335 0-4.75-2.1266-4.75-4.75v-7.0453c0-1.4647.67569-2.84745 1.83119-3.74746zm.92174 1.18339c1.1743-.91464 2.8199-.91464 3.9942 0l5 3.89445c.7906.6158 1.2529 1.56189 1.2529 2.56397v7.0454c0 1.795-1.4551 3.25-3.25 3.25h-1.25v-4.25c0-1.7949-1.4551-3.25-3.25-3.25h-1c-1.79495 0-3.25003 1.4551-3.25003 3.25v4.25h-1.25003c-1.79493 0-3.25-1.455-3.25-3.25v-7.0453c0-1.00218.46231-1.94827 1.25292-2.56406zm1.4971 10.75382c-.9665 0-1.75003.7835-1.75003 1.75v4.25h4.50003v-4.25c0-.9665-.7835-1.75-1.75-1.75z" fill-rule="evenodd"></path>
                    </svg>
        </li>
        <li class="menu-item">
          <svg id="music" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><g id="Layer_2" data-name="Layer 2"><path d="m24.5 61.5a10.5 10.5 0 1 1 10.5-10.5 10.512 10.512 0 0 1 -10.5 10.5zm0-18a7.5 7.5 0 1 0 7.5 7.5 7.508 7.508 0 0 0 -7.5-7.5z" fill-rule="evenodd"></path><path d="m33.5 52.5a1.5 1.5 0 0 1 -1.5-1.5v-40.25a6.115 6.115 0 0 1 3.238-5.4 6.016 6.016 0 0 1 6.269.306c3.875 2.587 8.493 7.698 8.493 17.344a1.5 1.5 0 0 1 -3 0c0-6.681-2.409-11.677-7.159-14.851a3.117 3.117 0 0 0 -4.841 2.601v40.25a1.5 1.5 0 0 1 -1.5 1.5z" fill-rule="evenodd"></path></g>
                    </svg>
        </li>
        <li class="menu-item">
          <svg id="search" viewBox="0 0 1800 1800" xmlns="http://www.w3.org/2000/svg"><g><path d="m1715.514 1630.048-368.416-368.402c-17.967-17.977-41.866-27.874-67.281-27.874-13.782 0-27.071 3.003-39.257 8.527l-94.596-94.594c133.584-119.751 217.789-293.534 217.789-486.634 0-360.375-293.193-653.561-653.572-653.561-360.38 0-653.568 293.186-653.568 653.561 0 360.382 293.188 653.57 653.568 653.57 146.069 0 281.087-48.174 390.033-129.453l96.854 96.862c-8.041 14.144-12.399 30.159-12.399 46.869 0 25.42 9.897 49.314 27.868 67.283l368.407 368.423c17.972 17.968 41.862 27.865 67.283 27.865 25.42 0 49.318-9.902 67.29-27.874 17.972-17.971 27.869-41.867 27.869-67.287.001-25.415-9.897-49.309-27.872-67.281zm-1596.968-968.977c0-326.224 265.405-591.627 591.634-591.627s591.638 265.403 591.638 591.627c0 326.231-265.408 591.636-591.638 591.636-326.228 0-591.634-265.405-591.634-591.636zm1553.174 1059.752c-6.272 6.277-14.62 9.733-23.492 9.733-8.879 0-17.222-3.456-23.489-9.726l-368.407-368.424c-6.272-6.272-9.728-14.614-9.728-23.488 0-8.873 3.455-17.215 9.732-23.488 6.269-6.273 14.605-9.726 23.48-9.726 8.869 0 17.211 3.452 23.488 9.733l368.415 368.406c6.276 6.273 9.733 14.615 9.733 23.484.001 8.876-3.456 17.22-9.732 23.496z"></path><path d="m733.941 187.121c145.201 0 427.813 158.624 427.813 449.396 0 17.104 13.863 30.967 30.968 30.967 17.104 0 30.968-13.863 30.968-30.967 0-145.848-64.515-281.118-181.66-380.892-93.039-79.241-213.969-130.439-308.088-130.439-17.104 0-30.967 13.864-30.967 30.967-.001 17.104 13.863 30.968 30.966 30.968z"></path></g>
                    </svg>
        </li>
        <li class="menu-item">
          <svg version="1.1" id="heart" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><g><g><path d="M466.706,66.173c-29.609-29.609-69.224-45.914-111.56-45.914c-36.448,0-70.876,12.088-98.643,34.342 c-28.166-22.254-62.637-34.342-98.729-34.342c-42.532,0-82.252,16.312-111.86,45.914C16.305,95.776,0,135.398,0,177.727 c0,42.335,16.305,81.951,45.914,111.553l197.065,197.065c3.591,3.598,8.306,5.396,13.021,5.396c4.703,0,9.405-1.793,13.003-5.372 l197.224-196.623C495.75,259.561,512,219.89,512,178.034C512,135.791,495.965,96.12,466.706,66.173z M440.056,263.821 L256.018,447.294L71.956,263.238c-22.647-22.653-35.122-53.023-35.122-85.511s12.475-62.858,35.122-85.511 c22.653-22.647,53.128-35.122,85.818-35.122c32.169,0,62.705,12.53,85.966,35.269c7.207,7.054,18.767,6.992,25.895-0.147 c22.653-22.647,53.017-35.122,85.511-35.122c32.494,0,62.858,12.475,85.358,34.974c22.352,22.868,34.661,53.398,34.661,85.966 C475.165,210.209,462.642,240.738,440.056,263.821z"></path></g></g></svg>
        </li>
        <li class="menu-item">
          <svg id="add" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1"><path d="m408 256a12 12 0 0 1 -12 12h-128v128a12 12 0 0 1 -24 0v-128h-128a12 12 0 0 1 0-24h128v-128a12 12 0 0 1 24 0v128h128a12 12 0 0 1 12 12zm104 0c0 141.159-114.841 256-256 256s-256-114.841-256-256 114.841-256 256-256 256 114.841 256 256zm-24 0c0-127.925-104.075-232-232-232s-232 104.075-232 232 104.075 232 232 232 232-104.075 232-232z"></path></svg>
        </li>
      </ul>
    </div>
    <div class="display-wrapper" id="displayWrapper">
      <div class="display">
        <img src="../df207206bcec5091fc980cbefa300f0a.jpg">
        <div class="resize-handle" id="resizeHandle"></div>
      </div>
    </div>
    <div class="right-sidebar">
      <div class="titles">
        titles
      </div>
      <div class="playlist">
        playlist
      </div>
    </div>
    <div class="player" style="padding: 10px; border: 1px solid black;" hidden>
      player
    </div>
  </div>
</body>

</html>

enter image description here

I want to make a layout using a grid, but I ran into a problem that I need to expand/shrink the image (script at the top) and the container with this image (.display-wrapper) must be close to the container with .titles and .playlist (.right-sidebar). How can I implement this?

I tried to use AI to solve this problem, but they didn’t give any useful advice

Solution

  • The issue coming from .display-wrapper, it doesn't take the full width that the grid parent container gives, but is limited to max-width: calc(100% - 80px);

    const displayWrapper = document.getElementById('displayWrapper');
const resizeHandle = document.getElementById('resizeHandle');

let startX = 0;
let startWidth = 0;

function startDrag(e) {
  startX = e.clientX;
  startWidth = parseInt(document.defaultView.getComputedStyle(displayWrapper).width, 10);
  document.documentElement.addEventListener('mousemove', drag);
  document.documentElement.addEventListener('mouseup', stopDrag);
}

function drag(e) {
  const newWidth = startWidth + (e.clientX - startX);
  displayWrapper.style.width = newWidth + 'px';
}

function stopDrag() {
  document.documentElement.removeEventListener('mousemove', drag);
  document.documentElement.removeEventListener('mouseup', stopDrag);
}

resizeHandle.addEventListener('mousedown', startDrag);
    * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.container {
  display: grid;
  grid-template-columns: minmax(40px, 80px) 0.8fr 2fr;
  grid-template-rows: auto 1fr 1fr 1fr;
  height: 100vh;
}

.sidebar {
  background-color: white;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));
  justify-content: center;
  align-items: center;
  height: 100vh;
  position: relative;
}

.titles {
  background-color: #f0f0f0;
  border: 1px solid black;
  height: 40vh;
  grid-column: 3 / 4;
  grid-row: 1 / 2;
  overflow: hidden;
}

.playlist {
  background-color: #f0f0f0;
  border: 1px solid black;
  grid-column: 3 / 4;
  grid-row: 2 / 4;
  height: 60vh;
  overflow: hidden;
}

.player {
  background-color: #f0f0f0;
  border: 1px solid black;
  grid-column: 2 / 3;
  grid-row: 4 / 5;
}

.display-wrapper {
  overflow: hidden;
  display: flex;
  justify-content: center;
  resize: horizontal;
  min-width: 200px;
  border: 1px solid red;
}

.display {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.display img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.resize-handle {
  width: 10px;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  cursor: ew-resize;
  background: transparent;
}

.menu-items {
  list-style: none;
  justify-self: center;
  margin: 0;
  padding: 0;
}

.menu-item {
  width: auto;
  align-self: center;
}

svg {
  cursor: pointer;
  width: 33px;
  height: auto;
  display: block;
  margin: auto;
  margin-top: 11vh;
  fill: gray;
}

svg#heart:hover {
  fill: rgb(240, 86, 86);
}

svg:hover {
  transform: scale(1.2);
  transition: all 0.3s;
}

svg#home:hover {
  fill: orange;
}

svg#music {
  border: 1px solid gray;
  border-radius: 5px;
  padding: 1px
}

svg#music:hover {
  fill: rgb(253, 179, 119);
  border-color: rgb(253, 179, 119);
}

svg#search:hover {
  fill: rgb(63, 141, 141);
}

svg#add:hover {
  fill: rgb(46, 46, 46);
}

.logo {
  justify-self: start;
  align-self: start;
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Audio Player</title>
</head>

<body>
  <div class="container">
    <div class="sidebar">
      <ul class="menu-items">
        <li class="menu-item">
          <img src="./src/icons/logo.png" class="logo" alt="logo">
        </li>
        <li class="menu-item">
          <svg id="home" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m9.08116 2.78259c1.71624-1.33679 4.12134-1.33679 5.83764 0l5 3.89445c1.1555.90001 1.8312 2.28276 1.8312 3.74736v7.0454c0 2.6234-2.1267 4.75-4.75 4.75h-10.00006c-2.62335 0-4.75-2.1266-4.75-4.75v-7.0453c0-1.4647.67569-2.84745 1.83119-3.74746zm.92174 1.18339c1.1743-.91464 2.8199-.91464 3.9942 0l5 3.89445c.7906.6158 1.2529 1.56189 1.2529 2.56397v7.0454c0 1.795-1.4551 3.25-3.25 3.25h-1.25v-4.25c0-1.7949-1.4551-3.25-3.25-3.25h-1c-1.79495 0-3.25003 1.4551-3.25003 3.25v4.25h-1.25003c-1.79493 0-3.25-1.455-3.25-3.25v-7.0453c0-1.00218.46231-1.94827 1.25292-2.56406zm1.4971 10.75382c-.9665 0-1.75003.7835-1.75003 1.75v4.25h4.50003v-4.25c0-.9665-.7835-1.75-1.75-1.75z" fill-rule="evenodd"></path>
                    </svg>
        </li>
        <li class="menu-item">
          <svg id="music" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><g id="Layer_2" data-name="Layer 2"><path d="m24.5 61.5a10.5 10.5 0 1 1 10.5-10.5 10.512 10.512 0 0 1 -10.5 10.5zm0-18a7.5 7.5 0 1 0 7.5 7.5 7.508 7.508 0 0 0 -7.5-7.5z" fill-rule="evenodd"></path><path d="m33.5 52.5a1.5 1.5 0 0 1 -1.5-1.5v-40.25a6.115 6.115 0 0 1 3.238-5.4 6.016 6.016 0 0 1 6.269.306c3.875 2.587 8.493 7.698 8.493 17.344a1.5 1.5 0 0 1 -3 0c0-6.681-2.409-11.677-7.159-14.851a3.117 3.117 0 0 0 -4.841 2.601v40.25a1.5 1.5 0 0 1 -1.5 1.5z" fill-rule="evenodd"></path></g>
                    </svg>
        </li>
        <li class="menu-item">
          <svg id="search" viewBox="0 0 1800 1800" xmlns="http://www.w3.org/2000/svg"><g><path d="m1715.514 1630.048-368.416-368.402c-17.967-17.977-41.866-27.874-67.281-27.874-13.782 0-27.071 3.003-39.257 8.527l-94.596-94.594c133.584-119.751 217.789-293.534 217.789-486.634 0-360.375-293.193-653.561-653.572-653.561-360.38 0-653.568 293.186-653.568 653.561 0 360.382 293.188 653.57 653.568 653.57 146.069 0 281.087-48.174 390.033-129.453l96.854 96.862c-8.041 14.144-12.399 30.159-12.399 46.869 0 25.42 9.897 49.314 27.868 67.283l368.407 368.423c17.972 17.968 41.862 27.865 67.283 27.865 25.42 0 49.318-9.902 67.29-27.874 17.972-17.971 27.869-41.867 27.869-67.287.001-25.415-9.897-49.309-27.872-67.281zm-1596.968-968.977c0-326.224 265.405-591.627 591.634-591.627s591.638 265.403 591.638 591.627c0 326.231-265.408 591.636-591.638 591.636-326.228 0-591.634-265.405-591.634-591.636zm1553.174 1059.752c-6.272 6.277-14.62 9.733-23.492 9.733-8.879 0-17.222-3.456-23.489-9.726l-368.407-368.424c-6.272-6.272-9.728-14.614-9.728-23.488 0-8.873 3.455-17.215 9.732-23.488 6.269-6.273 14.605-9.726 23.48-9.726 8.869 0 17.211 3.452 23.488 9.733l368.415 368.406c6.276 6.273 9.733 14.615 9.733 23.484.001 8.876-3.456 17.22-9.732 23.496z"></path><path d="m733.941 187.121c145.201 0 427.813 158.624 427.813 449.396 0 17.104 13.863 30.967 30.968 30.967 17.104 0 30.968-13.863 30.968-30.967 0-145.848-64.515-281.118-181.66-380.892-93.039-79.241-213.969-130.439-308.088-130.439-17.104 0-30.967 13.864-30.967 30.967-.001 17.104 13.863 30.968 30.966 30.968z"></path></g>
                    </svg>
        </li>
        <li class="menu-item">
          <svg version="1.1" id="heart" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><g><g><path d="M466.706,66.173c-29.609-29.609-69.224-45.914-111.56-45.914c-36.448,0-70.876,12.088-98.643,34.342 c-28.166-22.254-62.637-34.342-98.729-34.342c-42.532,0-82.252,16.312-111.86,45.914C16.305,95.776,0,135.398,0,177.727 c0,42.335,16.305,81.951,45.914,111.553l197.065,197.065c3.591,3.598,8.306,5.396,13.021,5.396c4.703,0,9.405-1.793,13.003-5.372 l197.224-196.623C495.75,259.561,512,219.89,512,178.034C512,135.791,495.965,96.12,466.706,66.173z M440.056,263.821 L256.018,447.294L71.956,263.238c-22.647-22.653-35.122-53.023-35.122-85.511s12.475-62.858,35.122-85.511 c22.653-22.647,53.128-35.122,85.818-35.122c32.169,0,62.705,12.53,85.966,35.269c7.207,7.054,18.767,6.992,25.895-0.147 c22.653-22.647,53.017-35.122,85.511-35.122c32.494,0,62.858,12.475,85.358,34.974c22.352,22.868,34.661,53.398,34.661,85.966 C475.165,210.209,462.642,240.738,440.056,263.821z"></path></g></g></svg>
        </li>
        <li class="menu-item">
          <svg id="add" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1"><path d="m408 256a12 12 0 0 1 -12 12h-128v128a12 12 0 0 1 -24 0v-128h-128a12 12 0 0 1 0-24h128v-128a12 12 0 0 1 24 0v128h128a12 12 0 0 1 12 12zm104 0c0 141.159-114.841 256-256 256s-256-114.841-256-256 114.841-256 256-256 256 114.841 256 256zm-24 0c0-127.925-104.075-232-232-232s-232 104.075-232 232 104.075 232 232 232 232-104.075 232-232z"></path></svg>
        </li>
      </ul>
    </div>
    <div class="display-wrapper" id="displayWrapper">
      <div class="display">
        <img src="../df207206bcec5091fc980cbefa300f0a.jpg">
        <div class="resize-handle" id="resizeHandle"></div>
      </div>
    </div>
    <div class="right-sidebar">
      <div class="titles">
        titles
      </div>
      <div class="playlist">
        playlist
      </div>
    </div>
    <div class="player" style="padding: 10px; border: 1px solid black;" hidden>
      player
    </div>
  </div>
</body>

</html>