如何优化R Shiny按钮布局：实现类Java GridLayout的规整效果

针对你遇到的按钮非正方形、行间距冗余问题，以下是两种优化方案，均能实现规整的网格布局效果：

方案一：使用Shiny原生栅格布局（fluidRow + column） #

利用Shiny自带的Bootstrap栅格系统构建行列结构，配合CSS消除默认边距，确保按钮为严格正方形：

library(shiny)

ui <- fixedPage(
  tags$style(HTML("
    .square-btn {
      width: 60px;
      height: 60px;
      padding: 0; /* 移除按钮内边距，保证严格正方形 */
      margin: 0; /* 移除按钮外边距 */
      background-color: #FFFFA0 !important;
    }
    .btn-col {
      padding: 0; /* 移除列的默认内边距，消除空隙 */
    }
  ")),
  # 第一行
  fluidRow(
    column(3, class = "btn-col", actionButton("but1", "but1", class = "square-btn")),
    column(3, class = "btn-col", actionButton("but2", "but2", class = "square-btn")),
    column(3, class = "btn-col", actionButton("but3", "but3", class = "square-btn")),
    column(3, class = "btn-col", actionButton("but4", "but4", class = "square-btn"))
  ),
  # 第二行
  fluidRow(
    column(3, class = "btn-col", actionButton("but5", "but5", class = "square-btn")),
    column(3, class = "btn-col", actionButton("but6", "but6", class = "square-btn")),
    column(3, class = "btn-col", actionButton("but7", "but7", class = "square-btn")),
    column(3, class = "btn-col", actionButton("but8", "but8", class = "square-btn"))
  ),
  # 第三行
  fluidRow(
    column(3, class = "btn-col", actionButton("but9", "but9", class = "square-btn")),
    column(3, class = "btn-col", actionButton("but10", "but10", class = "square-btn")),
    column(3, class = "btn-col", actionButton("but11", "but11", class = "square-btn")),
    column(3, class = "btn-col", actionButton("but12", "but12", class = "square-btn"))
  )
)

server <- function(input, output, session) {}

shinyApp(ui = ui, server = server)

方案二：使用CSS Grid布局（更贴近Java GridLayout） #

直接通过CSS Grid定义网格容器，按钮自动填充单元格，代码更简洁，布局精度更高：

library(shiny)

ui <- fixedPage(
  tags$style(HTML("
    .grid-container {
      display: grid;
      grid-template-columns: repeat(4, 60px); /* 4列，每列宽度60px */
      grid-template-rows: repeat(3, 60px); /* 3行，每行高度60px */
      gap: 0; /* 网格间距设为0，消除冗余空隙 */
    }
    .square-btn {
      width: 100%; /* 占满网格单元格宽度 */
      height: 100%; /* 占满网格单元格高度 */
      padding: 0;
      margin: 0;
      background-color: #FFFFA0 !important;
    }
  ")),
  div(class = "grid-container",
      lapply(1:12, function(i) {
        actionButton(paste0("but", i), paste0("but", i), class = "square-btn")
      })
  )
)

server <- function(input, output, session) {}

shinyApp(ui = ui, server = server)

原代码问题说明 #

1. 按钮非正方形：默认actionButton带有内边距（padding），导致设置width和height后，实际显示尺寸包含内边距，无法形成严格正方形。
2. 行间距冗余：absolutePanel的定位未考虑自身默认边距，且fixedPage的默认内边距干扰布局，导致行列间出现不必要的空隙。

内容的提问来源于stack exchange，提问作者Glory2Ukraine