how to create full slide size stretched three columns in Marp/Marpit

Question

how to create full slide size stretched three columns in Marp/Marpit

2.9k Views Asked by Wakan Tanka At 21 October 2024 at 03:35

I'm using marp/marpit to create slides. My goal is to create slide with three vertical columns. I have one CSS file which I use on HTML page and also in marp. In web browser the HTML page it is widen to whole page. But in PDF viewer (file generated by marp) slide has some borders from left/right top/bottom.

Files that I'm using:

page.html

<!DOCTYPE html>
<html>

<!-- page.html -->

<head>
    <!-- <link rel="stylesheet" href="css.css"> -->
    <link rel="stylesheet" href="custom-theme.css">
</head>

<body>
    <div class="container">
        <!-- <div class="toppane">Test Page</div> -->
        <div class="leftpane">
            <h1>Left column</h1>
        </div>
        <div class="middlepane">
            <h1>Middle column</h1>
        </div>
        <div class="rightpane">
            <h1>Right column</h1>
        </div>
    </div>
</body>

</html>

custom-theme.css

/* custom-theme.css */
/* @theme custom-theme */

@import 'default';

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
  }
  
  .container {
    width: 100%;
    height: 100%;
  }
  
  .leftpane {
      width: 33%;
      height: 100%;
      float: left;
      background-color: rosybrown;
      border-collapse: collapse;
  }
  
  .middlepane {
      width: 34%;
      height: 100%;
      float: left;
      background-color: royalblue;
      border-collapse: collapse;
  }
  
  .rightpane {
    width: 33%;
    height: 100%;
    position: relative;
    float: right;
    background-color: yellow;
    border-collapse: collapse;
  }
  
  /* .toppane {
    width: 100%;
    height: 100px;
    border-collapse: collapse;
    background-color: #4da6ff;
  } */

---
marp: true
theme: custom-theme

---

**slide.md**
<!-- slide.md -->

<div class="container">
    <!-- <div class="toppane">Test Page</div> -->
        <div class="leftpane">
            <h1>Left column</h1>
        </div>
        <div class="middlepane">
            <h1>Middle column</h1>
        </div>
        <div class="rightpane">
            <h1>Right column</h1>
        </div>
</div>

<!-- https://stackoverflow.com/questions/36662712/how-do-i-divide-a-page-in-three-vertical-sections/36662828 -->

Code that I'm using to generate PDF:

marp --html --bespoke.progress --allow-local-files --theme-set custom-theme.css --pdf -- slide.md -o slide.pdf

CSS used in HTML and displayed in browser

PDF file generated by marp

How can I stretch columns to full slide size in PDF? PS: why font has different size & color?

Thanks

Original Q&A

There are 1 best solutions below

**wordsforthewise** · Answer 1

Use this solution instead: https://github.com/orgs/marp-team/discussions/192

---
marp: true
style: @import url('https://unpkg.com/tailwindcss@^2/dist/utilities.min.css');
---

# Multi columns in Marp slide

<div class="grid grid-cols-2 gap-4">
<div>

## Column 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas eveniet, corporis commodi vitae accusamus obcaecati dolor corrupti eaque id numquam officia velit sapiente incidunt dolores provident laboriosam praesentium nobis culpa.

</div>
<div>

## Column 2

Tempore ad exercitationem necessitatibus nulla, optio distinctio illo non similique? Laborum dolor odio, ipsam incidunt corrupti quia nemo quo exercitationem adipisci quidem nesciunt deserunt repellendus inventore deleniti reprehenderit at earum.

</div>
</div>

You should be able to change grid-cols-2 to grid-cols-3.

how to create full slide size stretched three columns in Marp/Marpit

There are 1 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in MARP

Related Questions in MARPIT

Trending Questions

Popular # Hahtags

Popular Questions