What steps do I need to take to create my own Japanese tatami mat design?

Question

What steps do I need to take to create my own Japanese tatami mat design?

Looking to design an HTML layout inspired by the classic Japanese tatami mat pattern.

https://i.sstatic.net/vLUtp.png

Experimented with using rowspan and colspan in a table layout, making progress until the final colspan caused things to collapse.

td { 
    border: 1px solid black;
}

<table>
    <tbody>
        <tr>
            <td rowspan="2"></td>
            <td colspan="2"></td>
            <td colspan="2"></td>
            <td rowspan="2"></td>
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td colspan="2"></td>
            <td rowspan="2"></td>
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
            <td rowspan="2"></td>
        </tr>
        <tr>
            <td colspan="2"></td>
            <td colspan="2"></td>
        </tr>
    </tbody>
</table>

Interested in exploring more flexible layout options beyond tables.

html css

Answer 1

Answer №1

Utilizing a grid layout is the ideal approach. While it may require more code, the grid-template-areas property is a valuable tool as it provides a visual representation of the layout in CSS. To define the size, use grid-auto-columns and grid-auto-rows. I've opted for attribute selectors to streamline the CSS code.

.container {
  display: grid;
  grid-auto-columns: 5rem;
  grid-auto-rows: 5rem;
  grid-template-areas: 
    "a b b c c d"
    "a e f f g d"
    "h e i i g j"
    "h k k l l j";
}

.container > div {
  background-color: #DDD299;
  border: 1px solid black;
}

[a] { grid-area: a;}
[b] { grid-area: b;}
[c] { grid-area: c;}
[d] { grid-area: d;}
[e] { grid-area: e;}
[f] { grid-area: f;}
[g] { grid-area: g;}
[h] { grid-area: h;}
[i] { grid-area: i;}
[j] { grid-area: j;}
[k] { grid-area: k;}
[l] { grid-area: l;}

<div class="container">
  <div a></div>
  <div b></div>
  <div c></div>
  <div d></div>
  <div e></div>
  <div f></div>
  <div g></div>
  <div h></div>
  <div i></div>
  <div j></div>
  <div k></div>
  <div l></div>
</div>

Answer 2

Utilizing a grid layout is the ideal approach. While it may require more code, the grid-template-areas property is a valuable tool as it provides a visual representation of the layout in CSS. To define the size, use grid-auto-columns and grid-auto-rows. I've opted for attribute selectors to streamline the CSS code.

.container {
  display: grid;
  grid-auto-columns: 5rem;
  grid-auto-rows: 5rem;
  grid-template-areas: 
    "a b b c c d"
    "a e f f g d"
    "h e i i g j"
    "h k k l l j";
}

.container > div {
  background-color: #DDD299;
  border: 1px solid black;
}

[a] { grid-area: a;}
[b] { grid-area: b;}
[c] { grid-area: c;}
[d] { grid-area: d;}
[e] { grid-area: e;}
[f] { grid-area: f;}
[g] { grid-area: g;}
[h] { grid-area: h;}
[i] { grid-area: i;}
[j] { grid-area: j;}
[k] { grid-area: k;}
[l] { grid-area: l;}

<div class="container">
  <div a></div>
  <div b></div>
  <div c></div>
  <div d></div>
  <div e></div>
  <div f></div>
  <div g></div>
  <div h></div>
  <div i></div>
  <div j></div>
  <div k></div>
  <div l></div>
</div>

What steps do I need to take to create my own Japanese tatami mat design?

Answer №1

Similar questions

Error message appears when attempting to display a variable in HTML without defining it

Tips on widening a paper to its fullest width while also keeping it versatile and adaptable

Move the grid items to their new positions with animation

Utilizing Azure Mobile Services with HTML

What is the JavaScript mouseenter/out event all about?

Aligning divs, prevent duplicate HTML within multiple divs

Excessive white space at the bottom of a floated image within a small parent element

The radio button is not appearing correctly in my HTML form

The issue of custom breakpoints not functioning properly with Bootstrap 4's navbar-expand-* feature

Is there a way to prevent a web page from automatically refreshing using JavaScript?

Ensure that hyperlinks remain unbroken and do not split over two lines

Achieving both vertical and horizontal center alignment specifically for mobile devices

What steps can be taken to safeguard the title of the document in the top window from being altered by any iframe or script?

Angular 2.0 in conjunction with D3.js does not style SVG elements using CSS

Pause the counter based on the data attribute containing multiple values

Divs in jQuery smoothly slide down when a category is chosen

Achieve vertical scrolling within a div of a set width employing CSS

Preventing selection of past dates with Material UI in ReactJS

Uploading and previewing multiple images on a canvas

Dynamic Rendering of Object Arrays in Table Columns using JavaScript