What steps do I need to take to transform this square-within-a-square design into a horizontal

Question

What steps do I need to take to transform this square-within-a-square design into a horizontal

I'm having some trouble representing this layout horizontally. I need to figure out what changes are needed for it to work properly. My goal is to have the small squares at the bottom stacked vertically on top of each other, while keeping the bigger square's design intact.

.date-grid {
    width: 120px;
    height: 100px;
    display: flex;
    flex-direction: column;
}

.node {
    width: 100%;
    height: 100%;
    background: #e9ecef;
    border: none;
    padding: 0;
}

time {
    display: block;
    height: 75%;
    font-size: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
  
.smallHolder {
    width: 100%;
    height: 25%;
    display: flex;
}
  
.smallHolder>div {
    width: 25%;
    height: 100%;
    flex-shrink: 0;
    flex-grow: 1;
}
  
.next { background: #0060df; }  

.last { background: #d53343; }

<div class="date-grid">
    <button class="node">
        <time>3</time>
        <div class="smallHolder">
            <div class="next"></div>
            <div class="last"></div>
        </div>   
    </button>
</div>

html css

Answer 1

Answer №1

Are you searching for something like this? Grid can be very helpful in situations like these.

.date-grid {
  height: 100px;
  display: grid;
  grid-template-columns: 120px 25px;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "gray next" "gray last";
  padding: 0;
  border-style: none;
}

.gray {
  grid-area: gray;
  display: grid;
  place-content: center;
  background: #e9ecef;
}

time {
  font-size: 24px;
}

.next {
  grid-area: next;
  background: #0060df;
}

.last {
  grid-area: last;
  background: #d53343;
}

<button class="node date-grid">
  <time class='gray'>3</time>
  <div class="next"></div>
  <div class="last"></div>
</button>

Answer 2

Are you searching for something like this? Grid can be very helpful in situations like these.

.date-grid {
  height: 100px;
  display: grid;
  grid-template-columns: 120px 25px;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "gray next" "gray last";
  padding: 0;
  border-style: none;
}

.gray {
  grid-area: gray;
  display: grid;
  place-content: center;
  background: #e9ecef;
}

time {
  font-size: 24px;
}

.next {
  grid-area: next;
  background: #0060df;
}

.last {
  grid-area: last;
  background: #d53343;
}

<button class="node date-grid">
  <time class='gray'>3</time>
  <div class="next"></div>
  <div class="last"></div>
</button>

What steps do I need to take to transform this square-within-a-square design into a horizontal

Answer №1

Similar questions

Slider displays images generated by PHP in a horizontal motion

Stop hyperlinks from wrapping on the navigation bar in Bootstrap 4

Is there a way to retrieve information from all pages of a table on a webpage using Chrome?

Creating a straightforward CSS design that stretches to fit the entire viewport dimension

Utilizing Django template tags in a web link

expandable div or cell panels

Angular - applying the number pipe only when a value is present

Collapsing margins within table elements

adjust the dimensions of the clickable icon's background

What is the CSS method for styling a color label on an active input box?

Display outcome generated by JavaScript in the input box

Display an icon to act as a separator between icons in CSS styling

A single column in Bootstrap displaying text vertically

Step by step guide on inserting View and Delete buttons in an HTML table populated by JSON data

Troubleshooting directive not functioning properly with AngularJS ng-click

When double quotes are used in a string within an HTML input field, they may display as &

What is the best way to remove bootstrap when transitioning to a new microfrontend?

Div blur event for editing content

When employing DIV instead of TABLE, the issue arises where the width of the DIV does not completely occupy

Define the hover color options within your personalized Bootstrap 4 design